• 服务器端使用django websocket,客户端使用uniapp 请问服务端和客户端群组互发消息的代码怎么写的参考笔记

    2023/8/29 19:21:11

    服务器端使用django websocket,客户端使用uniapp 请问服务端和客户端群组互发消息的代码怎么写

    2023/8/29 19:22:25

    在服务器端使用Django WebSocket和客户端使用Uniapp的情况下，以下是代码示例来实现服务器端和客户端之间的群组互发消息。

    服务器端代码（使用Django Channels库）：

    1. 首先，在Django的settings.py文件中配置Channels：
     

    python
     

    1. # settings.py
    2.  
    3. INSTALLED_APPS = [
    4.     ...
    5.     'channels',
    6.     ...
    7. ]
    8.  
    9. CHANNEL_LAYERS = {
    10.     "default": {
    11.         "BACKEND": "channels.layers.InMemoryChannelLayer",
    12.     },
    13. }
     

    1. 创建一个consumers.py文件，并定义WebSocket的消费者类：
     

     

    python
     

    1. # consumers.py
    2.  
    3. from channels.generic.websocket import WebsocketConsumer
    4.  
    5. class ChatConsumer(WebsocketConsumer):
    6.     def connect(self):
    7.         # 加入特定群组
    8.         self.room_group_name = 'group_name'
    9.         async_to_sync(self.channel_layer.group_add)(
    10.             self.room_group_name,
    11.             self.channel_name
    12.         )
    13.         self.accept()
    14.  
    15.     def disconnect(self, close_code):
    16.         # 离开群组
    17.         async_to_sync(self.channel_layer.group_discard)(
    18.             self.room_group_name,
    19.             self.channel_name
    20.         )
    21.  
    22.     def receive(self, text_data):
    23.         # 接收到消息后进行处理
    24.         async_to_sync(self.channel_layer.group_send)(
    25.             self.room_group_name,
    26.             {
    27.                 'type': 'chat_message',
    28.                 'message': text_data,
    29.             }
    30.         )
    31.  
    32.     def chat_message(self, event):
    33.         # 发送消息给群组中的所有成员
    34.         message = event['message']
    35.         self.send(text_data=message)
     

    1. 在routing.py文件中配置URL路由：
     

     

    python
     

    1. # routing.py
    2.  
    3. from django.urls import re_path
    4.  
    5. from . import consumers
    6.  
    7. websocket_urlpatterns = [
    8.     re_path(r'ws/chat/$', consumers.ChatConsumer.as_asgi()),
    9. ]
     

    1. 运行Django开发服务器：
     

     

    shell
     

    python manage.py runserver

     

    客户端代码（使用Uniapp）：
     

    1. 在uniapp项目中创建一个WebSocket服务文件：
     

     

    javascript
     

    1. // utils/websocket.js
    2.  
    3. let socketTask = null
    4.  
    5. export function connectWebSocket() {
    6.   socketTask = uni.connectSocket({
    7.     url: 'ws://your-server-address/ws/chat/', // 替换为您的服务器地址
    8.   })
    9.  
    10.   socketTask.onOpen(() => {
    11.     console.log('WebSocket连接已打开')
    12.   })
    13.  
    14.   socketTask.onError(error => {
    15.     console.error('WebSocket连接发生错误', error)
    16.   })
    17.  
    18.   socketTask.onMessage(message => {
    19.     console.log('收到服务器消息：', message)
    20.     // 处理接收到的消息
    21.   })
    22.  
    23.   socketTask.onClose(() => {
    24.     console.log('WebSocket连接已关闭')
    25.     // 可在此处进行重连操作
    26.   })
    27. }
    28.  
    29. export function sendMessage(message) {
    30.   if (socketTask) {
    31.     socketTask.send({
    32.       data: message,
    33.     })
    34.   }
    35. }
     

    1. 在需要使用WebSocket的页面或组件中引入WebSocket服务文件，并调用函数建立连接和发送消息：
     

     

    1. <template>
    2.   <button @click="sendChatMessage">发送消息</button>
    3. </template>
    4.  
    5. <script>
    6. import { connectWebSocket, sendMessage } from '@/utils/websocket.js'
    7.  
    8. export default {
    9.   mounted() {
    10.     connectWebSocket()
    11.   },
    12.   methods: {
    13.     sendChatMessage() {
    14.       sendMessage('Hello, server!') // 发送消息给服务器
    15.     },
    16.   },
    17. }
    18. </script>
     

    以上是使用Django WebSocket和Uniapp实现服务器端和客户端之间群组互发消息的基本代码示例。请确保您根据实际情况修改服务器地址、群组名称以及其他细节。
     

     

     

    2023/8/29 20:07:02
     

    请使用uniapp写一个给django websocket互发消息的界面
     

    2023/8/29 20:07:44
     

    以下是使用Uniapp编写的一个简单界面，用于向Django WebSocket发送消息并接收来自服务器的消息。
     

     

    1. <template>
    2.   <view class="container">
    3.     <view class="message-list">
    4.       <text v-for="(message, index) in messages" :key="index">{{ message }}</text>
    5.     </view>
    6.     <input v-model="inputMessage" type="text" placeholder="输入消息" />
    7.     <button @click="sendMessage">发送</button>
    8.   </view>
    9. </template>
    10.  
    11. <script>
    12. import { connectWebSocket, sendMessage } from '@/utils/websocket.js'
    13.  
    14. export default {
    15.   data() {
    16.     return {
    17.       messages: [],
    18.       inputMessage: '',
    19.     }
    20.   },
    21.   mounted() {
    22.     connectWebSocket()
    23.  
    24.     // 监听服务器发送的消息
    25.     uni.$on('websocket-message', (message) => {
    26.       this.messages.push(message)
    27.     })
    28.   },
    29.   methods: {
    30.     sendMessage() {
    31.       if (!this.inputMessage.trim()) {
    32.         return
    33.       }
    34.  
    35.       sendMessage(this.inputMessage)
    36.  
    37.       this.inputMessage = '' // 清空输入框
    38.     },
    39.   },
    40. }
    41. </script>
    42.  
    43. <style>
    44. .container {
    45.   display: flex;
    46.   flex-direction: column;
    47.   justify-content: center;
    48.   align-items: center;
    49.   height: 100vh;
    50. }
    51.  
    52. .message-list {
    53.   display: flex;
    54.   flex-direction: column;
    55.   margin-bottom: 20px;
    56. }
    57. </style>
     

    在这个界面中，我们绑定了一个消息列表messages和一个输入框inputMessage。当用户点击发送按钮时，调用sendMessage方法将输入的消息通过WebSocket发送给服务器。同时，我们在页面挂载阶段监听了websocket-message事件，一旦接收到来自服务器的消息，将其添加到消息列表中显示出来。
     

    请确保您已正确配置了WebSocket连接和发送消息的逻辑，并根据实际情况修改相关代码。
     

     

     

    2023/8/29 20:16:23
     

    那个听服务器发送的消息代码不起作用
     

    2023/8/29 20:16:43
     

    抱歉，我之前的回答中遗漏了一些代码。请在Uniapp的main.js文件中添加下面的代码来处理WebSocket消息：
     

     

    javascript
     

    1. // main.js
    2.  
    3. import Vue from 'vue'
    4. import App from './App'
    5.  
    6. Vue.config.productionTip = false
    7.  
    8. const app = new Vue({
    9.   ...App,
    10. })
    11.  
    12. // 监听服务器发送的消息
    13. uni.onSocketMessage((res) => {
    14.   const message = res.data
    15.   uni.$emit('websocket-message', message)
    16. })
    17.  
    18. app.$mount()
     

    在这段代码中，我们使用uni.onSocketMessage方法监听来自WebSocket的消息，在接收到消息时，将其通过uni.$emit方法发送到名为websocket-message的事件上。然后在页面组件中，我们通过uni.$on监听该事件，并将消息添加到消息列表中显示出来。
     

    请确保您已经在main.js文件中添加了以上的代码，以监听和处理来自WebSocket的消息。
     

     

     

    2023/8/29 20:23:38
     

    请将客户端界面的代码美化一下
     

    2023/8/29 20:25:45
     

    以下是美化后的客户端界面代码：
     

     

    1. <template>
    2.   <view class="container">
    3.     <view class="message-list">
    4.       <text v-for="(message, index) in messages" :key="index" class="message-item">{{ message }}</text>
    5.     </view>
    6.     <view class="input-container">
    7.       <input v-model="inputMessage" type="text" placeholder="输入消息" class="input-field" />
    8.       <button @click="sendMessage" class="send-button">发送</button>
    9.     </view>
    10.   </view>
    11. </template>
    12.  
    13. <script>
    14. import { connectWebSocket, sendMessage } from '@/utils/websocket.js'
    15.  
    16. export default {
    17.   data() {
    18.     return {
    19.       messages: [],
    20.       inputMessage: '',
    21.     }
    22.   },
    23.   mounted() {
    24.     connectWebSocket()
    25.  
    26.     // 监听服务器发送的消息
    27.     uni.$on('websocket-message', (message) => {
    28.       this.messages.push(message)
    29.     })
    30.   },
    31.   methods: {
    32.     sendMessage() {
    33.       if (!this.inputMessage.trim()) {
    34.         return
    35.       }
    36.  
    37.       sendMessage(this.inputMessage)
    38.  
    39.       this.inputMessage = '' // 清空输入框
    40.     },
    41.   },
    42. }
    43. </script>
    44.  
    45. <style>
    46. .container {
    47.   display: flex;
    48.   flex-direction: column;
    49.   justify-content: center;
    50.   align-items: center;
    51.   height: 100vh;
    52.   background-color: #f5f5f5;
    53. }
    54.  
    55. .message-list {
    56.   display: flex;
    57.   flex-direction: column;
    58.   margin-bottom: 20px;
    59. }
    60.  
    61. .message-item {
    62.   padding: 10px;
    63.   border-radius: 5px;
    64.   background-color: #fff;
    65.   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    66.   margin-bottom: 10px;
    67. }
    68.  
    69. .input-container {
    70.   display: flex;
    71.   align-items: center;
    72. }
    73.  
    74. .input-field {
    75.   flex: 1;
    76.   padding: 10px;
    77.   border-radius: 5px 0 0 5px;
    78.   border: 1px solid #ccc;
    79.   background-color: #fff;
    80. }
    81.  
    82. .send-button {
    83.   padding: 10px 20px;
    84.   border-radius: 0 5px 5px 0;
    85.   background-color: #007bff;
    86.   color: #fff;
    87.   border: none;
    88.   cursor: pointer;
    89. }
    90. </style>
     

    在这个美化后的界面中，我们给消息列表项（message-item）添加了样式，使其具有圆角和阴影效果。输入框和发送按钮也都进行了样式调整，使整个界面看起来更加美观。
     

    请将上述代码复制到您的Uniapp项目中，并根据需要进行进一步的样式调整。
     

     

     

    2023/8/29 20:28:29
     

    请将输入框和按钮和微信一样固定住
     

    2023/8/29 20:29:24
     

    要将输入框和按钮固定在底部，您可以使用CSS的固定定位（fixed positioning）来实现。以下是更新后的代码块：
     

     

    1. <template>
    2.   <view class="container">
    3.     <view class="message-list">
    4.       <text v-for="(message, index) in messages" :key="index" class="message-item">{{ message }}</text>
    5.     </view>
    6.     <view class="input-container">
    7.       <input v-model="inputMessage" type="text" placeholder="输入消息" class="input-field" />
    8.       <button @click="sendMessage" class="send-button">发送</button>
    9.     </view>
    10.   </view>
    11. </template>
    12.  
    13. <style>
    14. .container {
    15.   display: flex;
    16.   flex-direction: column;
    17.   justify-content: space-between;
    18.   align-items: center;
    19.   height: 100vh;
    20.   background-color: #f5f5f5;
    21. }
    22.  
    23. .message-list {
    24.   display: flex;
    25.   flex-direction: column;
    26.   padding-bottom: 20px; /* 添加底部留白 */
    27. }
    28.  
    29. .message-item {
    30.   padding: 10px;
    31.   border-radius: 5px;
    32.   background-color: #fff;
    33.   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    34.   margin-bottom: 10px;
    35. }
    36.  
    37. .input-container {
    38.   display: flex;
    39.   align-items: center;
    40.   position: fixed;
    41.   bottom: 0;
    42.   left: 0;
    43.   right: 0;
    44.   padding: 10px;
    45.   background-color: #fff;
    46. }
    47.  
    48. .input-field {
    49.   flex: 1;
    50.   padding: 10px;
    51.   border-radius: 5px 0 0 5px;
    52.   border: 1px solid #ccc;
    53.   background-color: #fff;
    54. }
    55.  
    56. .send-button {
    57.   padding: 10px 20px;
    58.   border-radius: 0 5px 5px 0;
    59.   background-color: #007bff;
    60.   color: #fff;
    61.   border: none;
    62.   cursor: pointer;
    63. }
    64. </style>
     

    在这个更新后的代码中，我们使用了固定定位（fixed positioning）将输入框和按钮容器（input-container）固定在页面底部。通过将其position属性设置为fixed，并指定bottom: 0; left: 0; right: 0;来使其始终位于底部，并根据需要进行调整。同时，我们还为消息列表（message-list）添加了底部留白（padding-bottom: 20px;），以避免输入框和按钮遮挡住最后一条消息。
     

    请将更新后的代码复制到您的Uniapp项目中，并根据需要进行进一步的样式调整。
     

     

     

    2023/8/29 20:49:54
     

    客户端组聊得时候我怎么测试
     

    2023/8/29 20:50:22
     

    要测试客户端的群组聊天功能，您可以在多个客户端实例中同时打开应用，并加入同一个聊天群组。这样，您可以在其中一个客户端发送消息，然后在其他客户端上接收到该消息。
     

    以下是一些步骤来测试客户端的群组聊天功能：
     

    1. 启动您的Uniapp应用，并确保已经连接到Django WebSocket服务器。
    2. 在第一个客户端中输入一个昵称，并点击“加入群组”按钮。
    3. 打开另一个客户端应用，并使用相同的群组名称（例如，输入相同的群组名称或使用相同的昵称）。
    4. 点击“加入群组”按钮。
    5. 现在，您可以在任何一个客户端中输入消息，并在其他所有客户端上接收到该消息。
     

    通过这种方式，您可以模拟多个用户同时进行群组聊天，并测试消息的发送和接收功能。
     

    请注意，为了能够正确地进行测试，请确保您已经在Django服务器端实现了群组聊天的逻辑，并将消息发送到群组中的所有成员。并且，您需要根据具体情况修改代码以适配您的应用程序和服务器端实现。
     

     

     

    2023/8/29 20:50:56
     

    根据以上的代码 客户端组聊得时候我怎么测试
     

    2023/8/29 20:52:28
     

    要测试基于以上代码的客户端群组聊天功能，您可以按照以下步骤进行操作：
     

    1. 启动应用程序并连接到Django WebSocket服务器。
    2. 在一个客户端中输入昵称并点击“加入群组”按钮。这将使该客户端加入一个特定的聊天群组。
    3. 打开另一个客户端，并使用相同的群组名称（或者使用不同的昵称和相同的群组名称）加入同一个聊天群组。
    4. 现在，您可以在任何一个客户端中输入消息并点击发送按钮。
    5. 您会注意到，通过WebSocket连接，消息将被发送到Django服务器，并从服务器发送给所有其他客户端，以便它们能够接收到您发送的消息。
    6. 在其他客户端上，您将看到您发送的消息出现在消息列表中。
     

    通过这种方式，您可以模拟多个客户端同时进行群组聊天，并测试消息的发送和接收功能。请确保已正确配置服务器端以便处理群组聊天逻辑，并根据需要修改代码以适应您的实际情况。
     

     

     

    2023/8/29 20:56:54
     

    根据以上的代码 请优化服务端和客户端的代码 要求在客户端连接服务端的时候可以指定群组号码
     

    2023/8/29 21:05:40
     

    下面是优化后的服务端和客户端代码，以便在客户端连接服务器时可以指定群组号码：
     

    服务端（Django）代码：
     

     

    python
     

    1. # consumers.py
    2.  
    3. import json
    4. from channels.generic.websocket import AsyncWebsocketConsumer
    5.  
    6. class ChatConsumer(AsyncWebsocketConsumer):
    7.     async def connect(self):
    8.         self.group_name = self.scope['url_route']['kwargs'].get('group_id')
    9.         await self.channel_layer.group_add(
    10.             self.group_name,
    11.             self.channel_name
    12.         )
    13.         await self.accept()
    14.  
    15.     async def disconnect(self, close_code):
    16.         await self.channel_layer.group_discard(
    17.             self.group_name,
    18.             self.channel_name
    19.         )
    20.  
    21.     async def receive(self, text_data):
    22.         data = json.loads(text_data)
    23.         message = data.get('message')
    24.         # 处理收到的消息，可以根据需要进行逻辑处理
    25.         await self.channel_layer.group_send(
    26.             self.group_name,
    27.             {
    28.                 'type': 'chat_message',
    29.                 'message': message
    30.             }
    31.         )
    32.  
    33.     async def chat_message(self, event):
    34.         message = event['message']
    35.         await self.send(text_data=json.dumps({
    36.             'message': message
    37.         }))
     

    客户端（Uniapp）代码：
     

     

    1. <template>
    2.   <view class="container">
    3.     <view class="message-list">
    4.       <text v-for="(message, index) in messages" :key="index" class="message-item">{{ message }}</text>
    5.     </view>
    6.     <view class="input-container">
    7.       <input v-model="inputMessage" type="text" placeholder="输入消息" class="input-field" />
    8.       <button @click="sendMessage" class="send-button">发送</button>
    9.     </view>
    10.   </view>
    11. </template>
    12.  
    13. <script>
    14. import { connectWebSocket, sendMessage } from '@/utils/websocket.js'
    15.  
    16. export default {
    17.   data() {
    18.     return {
    19.       messages: [],
    20.       inputMessage: '',
    21.       groupID: 'your_group_id' // 在这里指定群组号码
    22.     }
    23.   },
    24.   mounted() {
    25.     connectWebSocket(this.groupID)
    26.  
    27.     // 监听服务器发送的消息
    28.     uni.$on('websocket-message', (message) => {
    29.       this.messages.push(message)
    30.     })
    31.   },
    32.   methods: {
    33.     sendMessage() {
    34.       if (!this.inputMessage.trim()) {
    35.         return
    36.       }
    37.  
    38.       sendMessage(this.inputMessage)
    39.  
    40.       this.inputMessage = '' // 清空输入框
    41.     },
    42.   },
    43. }
    44. </script>
    45.  
    46. <style>
    47. /* 样式同上 */
    48. </style>
     

    在服务端代码中，我们使用了URL路由中的group_id参数来获取客户端连接请求中指定的群组号码。然后，我们通过group_add方法将连接添加到相应的群组中，并在接收到消息时，使用group_send方法将消息发送给该群组的所有成员。
     

    在客户端代码中，我们添加了一个groupID变量，用于指定要加入的群组号码。在mounted生命周期钩子中，我们将该群组号码作为参数传递给connectWebSocket函数。这样，客户端将连接到指定的群组，并能够接收和发送消息。
     

    请根据实际情况修改代码并确保服务器端和客户端的代码一致。
     

     

     

    2023/8/29 21:08:10
     

    websocket.js还没有更新
     

    export function connectWebSocket(groupID) { socketTask = uni.connectSocket({ url: 'ws://localhost:8000/ws/chat/, // 替换为您的服务器地址 success() { console.log("初始化完成!") } }) }
     

    请问怎么将groupID传入到url路径中
     

    2023/8/29 21:20:42
     

    要将 groupID 传递给 URL 路径，您可以使用字符串拼接或模板字符串来动态构建 URL。以下是示例代码：
     

     

    javascript
     

    1. export function connectWebSocket(groupID) {
    2.   const url = `ws://localhost:8000/ws/chat/${groupID}`; // 使用模板字符串将 groupID 插入到 URL 中
    3.  
    4.   socketTask = uni.connectSocket({
    5.     url: url,
    6. 	
    7. 	success() {
    8. 		console.log("初始化完成!")
    9. 	}
    10.   })
    11. }
     

    在上述示例中，通过使用模板字符串，在 URL 的路径部分使用 ${groupID} 将 groupID 参数插入到 URL 中。这样，groupID 的值会动态地被替换为实际的参数值，并传递给 WebSocket 的 URL。请确保 groupID 的值是有效的以生成正确的 URL。
     

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
STM32L0 LPUART串口ORE溢出错误处理                            
    
UI组件库Kendo UI for Vue原生组件中文教程 - 如何开始制作动画                            
    
vue中获取复选框是否被选中的值、如何用JavaScript判断复选框是否被选中                            
    
Elasticsearch之拼音搜索(十五)                            
    
Python中Pandas常用函数及案例详解                            
    
【MongoDB-Redis-MySQL-Elasticsearch-Kibana-RabbitMQ-MinIO】Java全栈开发软件一网打尽                            
    
排序的本质：                            
    
「PAT乙级真题解析」Basic Level 1078 字符串压缩与解压 (问题分析+完整步骤+伪代码描述+提交通过代码)                            
    
Flutter 与 Dart 的市场应用                            
    
C++——类和对象练习（日期类）                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/qq_35622606/article/details/132569111
                
    •