El servidor usa django websocket y el cliente usa uniapp. Proporcione notas de referencia sobre cómo escribir el código para que el servidor y los grupos de clientes se envíen mensajes entre sí.

2023/8/29 19:21:11

El servidor usa django websocket y el cliente usa uniapp ¿Cómo escribo el código para que el servidor y los grupos de clientes se envíen mensajes entre sí?

2023/8/29 19:22:25

En el caso de utilizar Django WebSocket en el lado del servidor y Uniapp en el lado del cliente, el siguiente es un ejemplo de código para implementar mensajería grupal entre el servidor y el cliente.

Código del lado del servidor (usando la biblioteca de canales de Django):

Primero, configure los canales en el archivo settings.py de Django:

pitón

# settings.py

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

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

Cree un consumers.pyarchivo y defina la clase de consumidor WebSocket:

pitón

# 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)

routing.pyConfigure el enrutamiento de URL en el archivo :

pitón

# routing.py

from django.urls import re_path

from . import consumers

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

Ejecute el servidor de desarrollo Django:

caparazón

python manage.py runserver

Código de cliente (usando Uniapp):

Cree un archivo de servicio WebSocket en el proyecto uniapp:

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,
    })
  }
}

Introduzca el archivo del servicio WebSocket en la página o componente que necesita usar WebSocket y llame a la función para establecer la conexión y enviar el mensaje:

<template>
  <button @click="sendChatMessage">发送消息</button>
</template>

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

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

Lo anterior es un ejemplo de código básico para usar Django WebSocket y Uniapp para implementar mensajería grupal entre el servidor y el cliente. Asegúrese de modificar la dirección del servidor, el nombre del grupo y otros detalles de acuerdo con su situación real.

2023/8/29 20:07:02

Utilice uniapp para escribir una interfaz para enviar mensajes a django websocket.

2023/8/29 20:07:44

A continuación se muestra una interfaz simple escrita con Uniapp para enviar mensajes a Django WebSocket y recibir mensajes del servidor.

<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>

En esta interfaz, vinculamos una lista de mensajes messagesy un cuadro de entrada inputMessage. Cuando el usuario hace clic en el botón enviar, sendMessagese llama al método para enviar el mensaje ingresado al servidor a través de WebSocket. Al mismo tiempo, escuchamos websocket-messageeventos durante la fase de carga de la página y, una vez que se recibe un mensaje del servidor, lo agregamos a la lista de mensajes y lo mostramos.

Asegúrese de haber configurado correctamente la conexión WebSocket y la lógica de envío de mensajes, y modifique el código relevante de acuerdo con la situación real.

2023/8/29 20:16:23

Ese código que escucha los mensajes enviados por el servidor no funciona

2023/8/29 20:16:43

Lo siento, me perdí algún código de mi respuesta anterior. Agregue el siguiente código en el archivo main.js de Uniapp para manejar los mensajes de 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()

En este código, utilizamos uni.onSocketMessageun método para escuchar mensajes de WebSocket y, cuando se recibe un mensaje, uni.$emitlo enviamos a websocket-messageun evento nombrado mediante el método. Luego, en el componente de la página, uni.$onescuchamos el evento y agregamos el mensaje a la lista de mensajes para mostrarlo.

Asegúrese de haber agregado el código anterior en su archivo main.js para escuchar y manejar mensajes de WebSocket.

2023/8/29 20:23:38

Por favor embellezca el código de la interfaz del cliente.

2023/8/29 20:25:45

El siguiente es el código de interfaz de cliente embellecido:

<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>

En esta interfaz embellecida, agregamos estilos al elemento de la lista de mensajes (elemento de mensaje) para darle esquinas redondeadas y un efecto de sombra. El cuadro de entrada y el botón de enviar también han sido diseñados para que toda la interfaz se vea más hermosa.

Copie el código anterior en su proyecto Uniapp y realice más ajustes de estilo según sea necesario.

2023/8/29 20:28:29

Corrija el cuadro de entrada y el botón como WeChat

2023/8/29 20:29:24

Para fijar cuadros de entrada y botones en la parte inferior, puede utilizar el posicionamiento fijo CSS. Aquí está el bloque de código actualizado:

<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>

En este código actualizado, utilizamos un posicionamiento fijo para fijar el cuadro de entrada y el contenedor de entrada en la parte inferior de la página. Especifique que siempre esté en la parte inferior estableciendo sus positionpropiedades en y ajústelo según sea necesario. Al mismo tiempo, también agregamos un margen inferior ( ) a la lista de mensajes (lista de mensajes) para evitar que los cuadros de entrada y los botones bloqueen el último mensaje.fixedbottom: 0; left: 0; right: 0;padding-bottom: 20px;

Copie el código actualizado en su proyecto Uniapp y realice más ajustes de estilo según sea necesario.

2023/8/29 20:49:54

¿Cómo pruebo cuando el grupo de clientes está chateando?

2023/8/29 20:50:22

Para probar la funcionalidad del chat grupal del cliente, puede abrir la aplicación en varias instancias del cliente simultáneamente y unirse al mismo grupo de chat. De esta forma puedes enviar un mensaje a uno de los clientes y recibirlo en el otro cliente.

A continuación se detallan algunos pasos para probar la funcionalidad de chat grupal del cliente:

Inicie su aplicación Uniapp y asegúrese de que esté conectada al servidor Django WebSocket.
Ingrese un apodo en el primer cliente y haga clic en el botón "Unirse al grupo".
Abra otra aplicación cliente y use el mismo nombre de grupo (por ejemplo, ingrese el mismo nombre de grupo o use el mismo apodo).
Haga clic en el botón "Unirse al grupo".
Ahora puede ingresar un mensaje en cualquier cliente y recibirlo en todos los demás clientes.

De esta manera puedes simular varios usuarios en un chat grupal al mismo tiempo y probar el envío y recepción de mensajes.

Tenga en cuenta que para poder realizar la prueba correctamente, asegúrese de haber implementado la lógica del chat grupal en el lado del servidor Django y enviar mensajes a todos los miembros del grupo. Además, debe modificar el código para adaptarlo a su aplicación y a la implementación del lado del servidor.

2023/8/29 20:50:56

Según el código anterior, ¿cómo puedo probar cuándo el grupo de clientes chatea?

2023/8/29 20:52:28

Para probar la funcionalidad del chat grupal de clientes según el código anterior, puede seguir estos pasos:

Inicie la aplicación y conéctese al servidor Django WebSocket.
Ingrese un apodo en un cliente y haga clic en el botón "Unirse al grupo". Esto unirá al cliente a un grupo de chat específico.
Abra otro cliente y únase al mismo grupo de chat usando el mismo nombre de grupo (o un apodo diferente y el mismo nombre de grupo).
Ahora puede ingresar su mensaje en cualquiera de los clientes y presionar el botón enviar.
Notarás que a través de una conexión WebSocket, los mensajes se envían al servidor Django y desde el servidor a todos los demás clientes para que puedan recibir el mensaje que envías.
En otros clientes, verás que los mensajes que enviaste aparecen en la lista de mensajes.

De esta manera puedes simular que varios clientes tengan chats grupales al mismo tiempo y probar el envío y la recepción de mensajes. Asegúrese de que el lado del servidor esté configurado correctamente para manejar la lógica del chat grupal y modifique el código según sea necesario para adaptarse a su situación.

2023/8/29 20:56:54

De acuerdo con el código anterior, optimice los requisitos del código del servidor y del cliente. El cliente puede especificar el número de grupo al conectarse al servidor.

2023/8/29 21:05:40

El siguiente es el código de servidor y cliente optimizado para que se pueda especificar el número de grupo cuando el cliente se conecta al servidor:

Código del lado del servidor (Django):

pitón

# 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
        }))

Código de cliente (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>

En el código del servidor, utilizamos group_idlos parámetros en la ruta URL para obtener el número de grupo especificado en la solicitud de conexión del cliente. Luego group_addagregamos la conexión al grupo apropiado a través de un método y cuando se recibe un mensaje, usamos group_sendun método para enviar el mensaje a todos los miembros del grupo.

En el código del cliente, agregamos una groupIDvariable que especifica el número de grupo al que unirse. En mountedel enlace del ciclo de vida, pasamos el número de grupo como parámetro a connectWebSocketla función. De esta forma, el cliente se conectará al grupo especificado y podrá recibir y enviar mensajes.

Modifique el código de acuerdo con la situación real y asegúrese de que los códigos del lado del servidor y del lado del cliente sean consistentes.

2023/8/29 21:08:10

websocket.js aún no se ha actualizado

función de exportación connectWebSocket(groupID) { socketTask = uni.connectSocket({ url: 'ws://localhost:8000/ws/chat/, // Reemplace con la dirección de su servidor Success() { console.log("¡Inicialización completada! " ) } }) }

¿Cómo paso el ID de grupo a la ruta URL?

2023/8/29 21:20:42

Para groupIDpasar una ruta URL, puede utilizar la concatenación de cadenas o cadenas de plantilla para crear la URL dinámicamente. Aquí hay un código de muestra:

javascript

export function connectWebSocket(groupID) {
  const url = `ws://localhost:8000/ws/chat/${groupID}`; // 使用模板字符串将 groupID 插入到 URL 中

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

${groupID}En el ejemplo anterior, el parámetro se groupIDinserta en la URL mediante el uso de una cadena de plantilla en la parte de la ruta de la URL . De esta manera, groupIDel valor de se reemplazará dinámicamente con el valor del parámetro real y se pasará a la URL de WebSocket. Asegúrese de que groupIDel valor de sea válido para generar la URL correcta.

El servidor usa django websocket y el cliente usa uniapp. Proporcione notas de referencia sobre cómo escribir el código para que el servidor y los grupos de clientes se envíen mensajes entre sí.

Supongo que te gusta