Le serveur utilise Django Websocket et le client utilise Uniapp. Veuillez fournir des notes de référence sur la façon d'écrire le code pour que le serveur et les groupes de clients s'envoient des messages.

News 2023-09-12 04:16:32 views: null

2023/8/29 19:21:11

Le serveur utilise Django Websocket et le client utilise Uniapp. Comment puis-je écrire le code pour que le serveur et les groupes clients s'envoient des messages ?

2023/8/29 19:22:25

Dans le cas de l'utilisation de Django WebSocket côté serveur et d'Uniapp côté client, voici un exemple de code pour implémenter la messagerie de groupe entre le serveur et le client.

Code côté serveur (en utilisant la bibliothèque Django Channels) :

  1. Tout d’abord, configurez les canaux dans le fichier settings.py de Django :
 
 
python
 
 
# settings.py

INSTALLED_APPS = [
    ...
    'channels',
    ...
]

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer",
    },
}

 
 
     
  
  1. Créez un consumers.pyfichier et définissez la classe de consommateur WebSocket :
    2.  
 
 
 
 
 
python
 
 
# consumers.py

from channels.generic.websocket import WebsocketConsumer

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        # 加入特定群组
        self.room_group_name = 'group_name'
        async_to_sync(self.channel_layer.group_add)(
            self.room_group_name,
            self.channel_name
        )
        self.accept()

    def disconnect(self, close_code):
        # 离开群组
        async_to_sync(self.channel_layer.group_discard)(
            self.room_group_name,
            self.channel_name
        )

    def receive(self, text_data):
        # 接收到消息后进行处理
        async_to_sync(self.channel_layer.group_send)(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': text_data,
            }
        )

    def chat_message(self, event):
        # 发送消息给群组中的所有成员
        message = event['message']
        self.send(text_data=message)

 
 
     
  
  1. routing.pyConfigurez le routage des URL dans le fichier :
    2.  
 
 
 
 
 
python
 
 
# routing.py

from django.urls import re_path

from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/chat/$', consumers.ChatConsumer.as_asgi()),
]

 
 
     
  
  1. Exécutez le serveur de développement Django :
    2.  
 
 
 
 
 
coquille
 
 
python manage.py runserver

 
 
Code client (en utilisant Uniapp) :
 
 
     
  
  1. Créez un fichier de service WebSocket dans le projet uniapp :
    2.  
 
 
 
 
 
javascript
 
 
// utils/websocket.js

let socketTask = null

export function connectWebSocket() {
  socketTask = uni.connectSocket({
    url: 'ws://your-server-address/ws/chat/', // 替换为您的服务器地址
  })

  socketTask.onOpen(() => {
    console.log('WebSocket连接已打开')
  })

  socketTask.onError(error => {
    console.error('WebSocket连接发生错误', error)
  })

  socketTask.onMessage(message => {
    console.log('收到服务器消息：', message)
    // 处理接收到的消息
  })

  socketTask.onClose(() => {
    console.log('WebSocket连接已关闭')
    // 可在此处进行重连操作
  })
}

export function sendMessage(message) {
  if (socketTask) {
    socketTask.send({
      data: message,
    })
  }
}

 
 
     
  
  1. Introduisez le fichier du service WebSocket dans la page ou le composant qui doit utiliser WebSocket, et appelez la fonction pour établir la connexion et envoyer le message :
    2.  
 
 
 
 
 
<template>
  <button @click="sendChatMessage">发送消息</button>
</template>

<script>
import { connectWebSocket, sendMessage } from '@/utils/websocket.js'

export default {
  mounted() {
    connectWebSocket()
  },
  methods: {
    sendChatMessage() {
      sendMessage('Hello, server!') // 发送消息给服务器
    },
  },
}
</script>

 
 
Ce qui précède est un exemple de code de base pour utiliser Django WebSocket et Uniapp pour implémenter la messagerie de groupe entre le serveur et le client. Veuillez vous assurer de modifier l'adresse du serveur, le nom du groupe et d'autres détails en fonction de votre situation réelle.
 
 
 
 
 
 
2023/8/29 20:07:02
 
 
Veuillez utiliser uniapp pour écrire une interface permettant d'envoyer des messages à Django Websocket.
 
 
2023/8/29 20:07:44
 
 
Vous trouverez ci-dessous une interface simple écrite à l'aide d'Uniapp pour envoyer des messages à Django WebSocket et recevoir des messages du serveur.
 
 
 
 
<template>
  <view class="container">
    <view class="message-list">
      <text v-for="(message, index) in messages" :key="index">{
   
   { message }}</text>
    </view>
    <input v-model="inputMessage" type="text" placeholder="输入消息" />
    <button @click="sendMessage">发送</button>
  </view>
</template>

<script>
import { connectWebSocket, sendMessage } from '@/utils/websocket.js'

export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
    }
  },
  mounted() {
    connectWebSocket()

    // 监听服务器发送的消息
    uni.$on('websocket-message', (message) => {
      this.messages.push(message)
    })
  },
  methods: {
    sendMessage() {
      if (!this.inputMessage.trim()) {
        return
      }

      sendMessage(this.inputMessage)

      this.inputMessage = '' // 清空输入框
    },
  },
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.message-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
</style>

 
 
Dans cette interface, nous lions une liste de messages messageset une zone de saisie inputMessage. Lorsque l'utilisateur clique sur le bouton d'envoi, sendMessagela méthode est appelée pour envoyer le message saisi au serveur via WebSocket. En même temps, nous écoutons les websocket-messageévénements pendant la phase de chargement de la page, et une fois qu'un message est reçu du serveur, nous l'ajoutons à la liste des messages et l'affichons.
 
 
Veuillez vous assurer que vous avez correctement configuré la connexion WebSocket et la logique d'envoi des messages, et modifiez le code correspondant en fonction de la situation réelle.
 
 
 
 
 
 
2023/8/29 20:16:23
 
 
Ce code qui écoute les messages envoyés par le serveur ne fonctionne pas
 
 
2023/8/29 20:16:43
 
 
Désolé, j'ai raté du code dans ma réponse précédente. Veuillez ajouter le code suivant dans le fichier main.js d'Uniapp pour gérer les messages WebSocket :
 
 
 
 
javascript
 
 
// main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

const app = new Vue({
  ...App,
})

// 监听服务器发送的消息
uni.onSocketMessage((res) => {
  const message = res.data
  uni.$emit('websocket-message', message)
})

app.$mount()

 
 
Dans ce code, nous utilisons uni.onSocketMessageune méthode pour écouter les messages de WebSocket, et lorsqu'un message est reçu, nous uni.$emitl'envoyons à websocket-messageun événement nommé via la méthode. Ensuite dans le composant page, nous uni.$onécoutons l'événement et ajoutons le message à la liste des messages pour l'afficher.
 
 
Veuillez vous assurer d'avoir ajouté le code ci-dessus dans votre fichier main.js pour écouter et gérer les messages de WebSocket.
 
 
 
 
 
 
2023/8/29 20:23:38
 
 
Merci d'embellir le code de l'interface client
 
 
2023/8/29 20:25:45
 
 
Voici le code de l'interface client embelli :
 
 
 
 
<template>
  <view class="container">
    <view class="message-list">
      <text v-for="(message, index) in messages" :key="index" class="message-item">{
   
   { message }}</text>
    </view>
    <view class="input-container">
      <input v-model="inputMessage" type="text" placeholder="输入消息" class="input-field" />
      <button @click="sendMessage" class="send-button">发送</button>
    </view>
  </view>
</template>

<script>
import { connectWebSocket, sendMessage } from '@/utils/websocket.js'

export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
    }
  },
  mounted() {
    connectWebSocket()

    // 监听服务器发送的消息
    uni.$on('websocket-message', (message) => {
      this.messages.push(message)
    })
  },
  methods: {
    sendMessage() {
      if (!this.inputMessage.trim()) {
        return
      }

      sendMessage(this.inputMessage)

      this.inputMessage = '' // 清空输入框
    },
  },
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.message-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.message-item {
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.input-container {
  display: flex;
  align-items: center;
}

.input-field {
  flex: 1;
  padding: 10px;
  border-radius: 5px 0 0 5px;
  border: 1px solid #ccc;
  background-color: #fff;
}

.send-button {
  padding: 10px 20px;
  border-radius: 0 5px 5px 0;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>

 
 
Dans cette interface embellie, nous avons ajouté des styles à l'élément de liste de messages (message-item) pour lui donner des coins arrondis et un effet d'ombre. La zone de saisie et le bouton d'envoi ont également été conçus pour rendre l'ensemble de l'interface plus belle.
 
 
Veuillez copier le code ci-dessus dans votre projet Uniapp et apporter d'autres ajustements de style si nécessaire.
 
 
 
 
 
 
2023/8/29 20:28:29
 
 
Veuillez corriger la zone de saisie et le bouton comme WeChat
 
 
2023/8/29 20:29:24
 
 
Pour fixer les zones de saisie et les boutons en bas, vous pouvez utiliser le positionnement fixe CSS. Voici le bloc de code mis à jour :
 
 
 
 
<template>
  <view class="container">
    <view class="message-list">
      <text v-for="(message, index) in messages" :key="index" class="message-item">{
   
   { message }}</text>
    </view>
    <view class="input-container">
      <input v-model="inputMessage" type="text" placeholder="输入消息" class="input-field" />
      <button @click="sendMessage" class="send-button">发送</button>
    </view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.message-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 20px; /* 添加底部留白 */
}

.message-item {
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.input-container {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: #fff;
}

.input-field {
  flex: 1;
  padding: 10px;
  border-radius: 5px 0 0 5px;
  border: 1px solid #ccc;
  background-color: #fff;
}

.send-button {
  padding: 10px 20px;
  border-radius: 0 5px 5px 0;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>

 
 
Dans ce code mis à jour, nous utilisons un positionnement fixe pour fixer la zone de saisie et le conteneur de saisie au bas de la page. Spécifiez qu'il est toujours en bas en définissant ses positionpropriétés sur et ajustez-le si nécessaire. Dans le même temps, nous avons également ajouté une marge inférieure ( ) à la liste des messages (message-list) pour empêcher les zones de saisie et les boutons de bloquer le dernier message.fixedbottom: 0; left: 0; right: 0;padding-bottom: 20px;
 
 
Veuillez copier le code mis à jour dans votre projet Uniapp et apporter d'autres ajustements de style si nécessaire.
 
 
 
 
 
 
2023/8/29 20:49:54
 
 
Comment puis-je tester quand le groupe de clients discute ?
 
 
2023/8/29 20:50:22
 
 
Pour tester la fonctionnalité de discussion de groupe du client, vous pouvez ouvrir l'application simultanément dans plusieurs instances client et rejoindre le même groupe de discussion. De cette façon, vous pouvez envoyer un message sur l'un des clients et le recevoir sur l'autre client.
 
 
Voici quelques étapes pour tester la fonctionnalité de discussion de groupe du client :
 
 
     
  
  1. Démarrez votre application Uniapp et assurez-vous qu'elle est connectée au serveur Django WebSocket.
    2.  
  
  2. Entrez un pseudo dans le premier client et cliquez sur le bouton "Rejoindre le groupe".
    3.  
  
  3. Ouvrez une autre application client et utilisez le même nom de groupe (par exemple, saisissez le même nom de groupe ou utilisez le même surnom).
    4.  
  
  4. Cliquez sur le bouton "Rejoindre le groupe".
    5.  
  
  5. Vous pouvez désormais saisir un message sur n'importe quel client et le recevoir sur tous les autres clients.
    6.  
 
 
 
De cette façon, vous pouvez simuler plusieurs utilisateurs dans une discussion de groupe en même temps et tester l'envoi et la réception de messages.
 
 
Veuillez noter que pour pouvoir tester correctement, assurez-vous d'avoir implémenté la logique de discussion de groupe côté serveur Django et d'envoyer des messages à tous les membres du groupe. En outre, vous devez modifier le code en fonction de votre application et de votre implémentation côté serveur.
 
 
 
 
 
 
2023/8/29 20:50:56
 
 
D'après le code ci-dessus, comment puis-je tester quand le groupe de clients discute ?
 
 
2023/8/29 20:52:28
 
 
Pour tester la fonctionnalité de discussion de groupe de clients basée sur le code ci-dessus, vous pouvez suivre ces étapes :
 
 
     
  
  1. Démarrez l'application et connectez-vous au serveur Django WebSocket.
    2.  
  
  2. Entrez un pseudo dans un client et cliquez sur le bouton "Rejoindre le groupe". Cela joindra le client à un groupe de discussion spécifique.
    3.  
  
  3. Ouvrez un autre client et rejoignez le même groupe de discussion en utilisant le même nom de groupe (ou un surnom différent et le même nom de groupe).
    4.  
  
  4. Vous pouvez maintenant saisir votre message dans l'un ou l'autre client et appuyer sur le bouton d'envoi.
    5.  
  
  5. Vous remarquerez que via la connexion WebSocket, les messages sont envoyés au serveur Django et du serveur à tous les autres clients afin qu'ils puissent recevoir le message que vous envoyez.
    6.  
  
  6. Sur les autres clients, vous verrez les messages que vous avez envoyés apparaître dans la liste des messages.
    7.  
 
 
 
De cette façon, vous pouvez simuler plusieurs clients ayant des discussions de groupe en même temps et tester l'envoi et la réception de messages. Veuillez vous assurer que le côté serveur est correctement configuré pour gérer la logique de discussion de groupe et modifier le code si nécessaire en fonction de votre situation.
 
 
 
 
 
 
2023/8/29 20:56:54
 
 
Selon le code ci-dessus, veuillez optimiser les exigences de code du serveur et du client. Le client peut spécifier le numéro de groupe lors de la connexion au serveur.
 
 
2023/8/29 21:05:40
 
 
Voici le code serveur et client optimisé afin que le numéro de groupe puisse être spécifié lorsque le client se connecte au serveur :
 
 
Code côté serveur (Django) :
 
 
 
 
python
 
 
# consumers.py

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.group_name = self.scope['url_route']['kwargs'].get('group_id')
        await self.channel_layer.group_add(
            self.group_name,
            self.channel_name
        )
        await self.accept()

    async def disconnect(self, close_code):
        await self.channel_layer.group_discard(
            self.group_name,
            self.channel_name
        )

    async def receive(self, text_data):
        data = json.loads(text_data)
        message = data.get('message')
        # 处理收到的消息，可以根据需要进行逻辑处理
        await self.channel_layer.group_send(
            self.group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )

    async def chat_message(self, event):
        message = event['message']
        await self.send(text_data=json.dumps({
            'message': message
        }))

 
 
Code client (Uniapp) :
 
 
 
 
<template>
  <view class="container">
    <view class="message-list">
      <text v-for="(message, index) in messages" :key="index" class="message-item">{
   
   { message }}</text>
    </view>
    <view class="input-container">
      <input v-model="inputMessage" type="text" placeholder="输入消息" class="input-field" />
      <button @click="sendMessage" class="send-button">发送</button>
    </view>
  </view>
</template>

<script>
import { connectWebSocket, sendMessage } from '@/utils/websocket.js'

export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
      groupID: 'your_group_id' // 在这里指定群组号码
    }
  },
  mounted() {
    connectWebSocket(this.groupID)

    // 监听服务器发送的消息
    uni.$on('websocket-message', (message) => {
      this.messages.push(message)
    })
  },
  methods: {
    sendMessage() {
      if (!this.inputMessage.trim()) {
        return
      }

      sendMessage(this.inputMessage)

      this.inputMessage = '' // 清空输入框
    },
  },
}
</script>

<style>
/* 样式同上 */
</style>

 
 
Dans le code côté serveur, nous utilisons group_idles paramètres du routage URL pour obtenir le numéro de groupe spécifié dans la demande de connexion client. Nous group_addajoutons ensuite la connexion au groupe approprié via une méthode et lorsqu'un message est reçu, utilisons group_sendune méthode pour envoyer le message à tous les membres du groupe.
 
 
Dans le code client, nous avons ajouté une groupIDvariable qui précise le numéro de groupe à rejoindre. Dans mountedle hook de cycle de vie, nous transmettons le numéro de groupe en tant que paramètre à connectWebSocketla fonction. De cette façon, le client se connectera au groupe spécifié et pourra recevoir et envoyer des messages.
 
 
Veuillez modifier le code en fonction de la situation réelle et vous assurer que les codes côté serveur et côté client sont cohérents.
 
 
 
 
 
 
2023/8/29 21:08:10
 
 
websocket.js n'a pas encore été mis à jour
 
 
export function connectWebSocket(groupID) { socketTask = uni.connectSocket({ url: 'ws://localhost:8000/ws/chat/, // Remplacer par l'adresse de votre serveur success() { console.log("Initialisation terminée ! " ) } }) }
 
 
Comment transmettre le groupID dans le chemin URL ?
 
 
2023/8/29 21:20:42
 
 
Pour groupIDtransmettre un chemin d'URL, vous pouvez utiliser la concaténation de chaînes ou des chaînes de modèles pour créer dynamiquement l'URL. Voici un exemple de code :
 
 
 
 
javascript
 
 
export function connectWebSocket(groupID) {
  const url = `ws://localhost:8000/ws/chat/${groupID}`; // 使用模板字符串将 groupID 插入到 URL 中

  socketTask = uni.connectSocket({
    url: url,
	
	success() {
		console.log("初始化完成!")
	}
  })
}

 
 
${groupID}Dans l'exemple ci-dessus, le paramètre est groupIDinséré dans l'URL à l'aide d'une chaîne de modèle dans la partie chemin de l'URL . De cette façon, groupIDla valeur de sera remplacée dynamiquement par la valeur réelle du paramètre et transmise à l'URL WebSocket. Veuillez vous assurer que groupIDla valeur de est valide pour générer l'URL correcte.
 
 
 


                    

                        
Je suppose que tu aimes

                        

                            
                            
                        

                    

                    
Origine blog.csdn.net/qq_35622606/article/details/132569111

                    

                        
                    

                    

                

            

            


                

                    

                        
                        
                        
                        
                    

                    

                        

                            

                                conseillé
                            

                            

                        

                    

                    

                        

                        
                        
                    

                


                

                    

                        

                            

                                Classement
                            

                            

                        

                    

                    

                        
                    

                

                

                    

                        

                            

                                du quotidien
                            

                            

                                Plus
                            

                            

                        

                    

                    

                        

                            2024-06-10(0)
                        

                        

                            2024-06-09(0)
                        

                        

                            2024-06-08(0)
                        

                        

                            2024-06-07(0)
                        

                        

                            2024-06-06(0)
                        

                        

                            2024-06-05(0)
                        

                        

                            2024-06-04(2)
                        

                        

                            2024-06-03(0)
                        

                        

                            2024-06-02(1)
                        

                        

                            2024-06-01(0)
                        

                    

                


            


            
        

    





    

        

            
Code World

            
© 2018 codetd.com