서버는 django websocket을 사용하고 클라이언트는 uniapp을 사용하는데, 서버와 클라이언트 그룹이 서로 메시지를 보내기 위한 코드 작성 방법에 대한 참고사항을 알려주세요.

2023/8/29 19:21:11

서버는 django websocket을 사용하고 클라이언트는 uniapp을 사용하는데 서버와 클라이언트 그룹이 서로 메시지를 보내는 코드는 어떻게 작성하나요?

2023/8/29 19:22:25

서버 측에서는 Django WebSocket을, 클라이언트 측에서는 Uniapp을 사용하는 경우, 서버와 클라이언트 간 그룹 메시징을 구현하기 위한 코드 예제는 다음과 같습니다.

서버 측 코드 (Django 채널 라이브러리 사용):

먼저 Django의 settings.py 파일에서 채널을 구성합니다.

파이썬

# settings.py

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

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

파일을 만들고 consumers.pyWebSocket 소비자 클래스를 정의합니다.

파이썬

# 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.py파일에서 URL 라우팅을 구성합니다 .

파이썬

# routing.py

from django.urls import re_path

from . import consumers

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

Django 개발 서버를 실행합니다:

껍데기

python manage.py runserver

클라이언트 코드 (Uniapp 사용):

uniapp 프로젝트에서 WebSocket 서비스 파일을 만듭니다.

자바스크립트

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

WebSocket을 사용해야 하는 페이지나 구성 요소에 WebSocket 서비스 파일을 도입하고 함수를 호출하여 연결을 설정하고 메시지를 보냅니다.

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

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

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

위는 Django WebSocket과 Uniapp을 사용하여 서버와 클라이언트 간의 그룹 메시징을 구현하기 위한 기본 코드 예제입니다. 실제 상황에 맞게 서버 주소, 그룹 이름, 기타 세부 사항을 수정하시기 바랍니다.

2023/8/29 20:07:02

django websocket에 메시지를 보내기 위한 인터페이스를 작성하려면 uniapp을 사용하세요.

2023/8/29 20:07:44

다음은 Django WebSocket에 메시지를 보내고 서버에서 메시지를 받기 위해 Uniapp을 사용하여 작성된 간단한 인터페이스입니다.

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

이 인터페이스에서는 메시지 목록 messages과 입력 상자를 바인딩합니다 inputMessage. 사용자가 보내기 버튼을 클릭하면 sendMessage입력된 메시지를 WebSocket을 통해 서버로 보내는 메소드가 호출됩니다. 동시에 websocket-message페이지 로딩 단계에서 이벤트를 수신하고, 서버로부터 메시지가 수신되면 이를 메시지 목록에 추가하고 표시합니다.

WebSocket 연결 및 메시지 전송 로직을 올바르게 구성했는지 확인하고 실제 상황에 따라 관련 코드를 수정하십시오.

2023/8/29 20:16:23

서버에서 보낸 메시지를 수신하는 코드가 작동하지 않습니다.

2023/8/29 20:16:43

죄송합니다. 이전 답변에서 일부 코드가 누락되었습니다. WebSocket 메시지를 처리하려면 Uniapp의 main.js 파일에 다음 코드를 추가하세요.

자바스크립트

// 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()

이 코드에서는 메서드를 사용하여 uni.onSocketMessageWebSocket의 메시지를 수신하고, 메시지가 수신되면 해당 메서드를 통해 명명된 이벤트 uni.$emit로 메시지를 보냅니다 . websocket-message그런 다음 페이지 구성 요소에서 uni.$on이벤트를 수신하고 메시지 목록에 메시지를 추가하여 표시합니다.

WebSocket의 메시지를 수신하고 처리하려면 main.js 파일에 위 코드를 추가했는지 확인하세요.

2023/8/29 20:23:38

클라이언트 인터페이스의 코드를 아름답게 만들어주세요.

2023/8/29 20:25:45

다음은 미화된 클라이언트 인터페이스 코드입니다.

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

이 아름다운 인터페이스에서는 메시지 목록 항목(message-item)에 스타일을 추가하여 둥근 모서리와 그림자 효과를 제공했습니다. 입력 상자와 보내기 버튼도 전체 인터페이스가 더욱 아름답게 보이도록 스타일이 지정되었습니다.

위 코드를 Uniapp 프로젝트에 복사하고 필요에 따라 스타일을 추가로 조정하세요.

2023/8/29 20:28:29

위챗처럼 입력창과 버튼을 수정해주세요

2023/8/29 20:29:24

입력 상자와 버튼을 하단에 고정하려면 CSS 고정 위치 지정을 사용할 수 있습니다. 업데이트된 코드 블록은 다음과 같습니다.

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

이 업데이트된 코드에서는 고정 위치 지정을 사용하여 입력 상자와 입력 컨테이너를 페이지 하단에 고정합니다. 속성 position을 로 설정하여 항상 맨 아래에 있도록 fixed지정 bottom: 0; left: 0; right: 0;하고 필요에 따라 조정합니다. 동시에 padding-bottom: 20px;입력란과 버튼이 마지막 메시지를 가리는 것을 방지하기 위해 메시지 목록(message-list)에 하단 여백( )도 추가했습니다.

업데이트된 코드를 Uniapp 프로젝트에 복사하고 필요에 따라 스타일을 추가로 조정하세요.

2023/8/29 20:49:54

클라이언트 그룹이 채팅 중일 때 어떻게 테스트합니까?

2023/8/29 20:50:22

클라이언트의 그룹 채팅 기능을 테스트하려면 여러 클라이언트 인스턴스에서 동시에 앱을 열고 동일한 채팅 그룹에 참여할 수 있습니다. 이렇게 하면 클라이언트 중 하나에서 메시지를 보내고 다른 클라이언트에서 메시지를 받을 수 있습니다.

클라이언트의 그룹 채팅 기능을 테스트하는 몇 가지 단계는 다음과 같습니다.

Uniapp 애플리케이션을 시작하고 Django WebSocket 서버에 연결되어 있는지 확인하세요.
첫 번째 클라이언트에서 닉네임을 입력하고 "그룹 가입" 버튼을 클릭하세요.
다른 클라이언트 앱을 열고 동일한 그룹 이름을 사용합니다(예: 동일한 그룹 이름을 입력하거나 동일한 닉네임을 사용).
"그룹 가입" 버튼을 클릭하세요.
이제 한 클라이언트에 메시지를 입력하고 다른 모든 클라이언트에서 이를 받을 수 있습니다.

이렇게 하면 그룹 채팅에서 여러 사용자를 동시에 시뮬레이션하고 메시지 보내기 및 받기를 테스트할 수 있습니다.

올바르게 테스트하려면 Django 서버 측에 그룹 채팅 로직을 구현했는지 확인하고 그룹의 모든 구성원에게 메시지를 보내야 합니다. 또한 애플리케이션과 서버측 구현에 맞게 코드를 수정해야 합니다.

2023/8/29 20:50:56

위 코드에 따르면 클라이언트 그룹이 채팅할 때 어떻게 테스트할 수 있나요?

2023/8/29 20:52:28

위의 코드를 기반으로 클라이언트 그룹 채팅 기능을 테스트하려면 다음 단계를 따르세요.

애플리케이션을 시작하고 Django WebSocket 서버에 연결합니다.
클라이언트에 닉네임을 입력하고 "그룹 가입" 버튼을 클릭하세요. 그러면 클라이언트가 특정 채팅 그룹에 참여하게 됩니다.
다른 클라이언트를 열고 동일한 그룹 이름(또는 다른 별명 및 동일한 그룹 이름)을 사용하여 동일한 채팅 그룹에 참여하세요.
이제 두 클라이언트 중 하나에 메시지를 입력하고 보내기 버튼을 누를 수 있습니다.
WebSocket 연결을 통해 메시지는 Django 서버로 전송되고 서버에서 다른 모든 클라이언트로 전송되므로 해당 클라이언트는 사용자가 보내는 메시지를 받을 수 있습니다.
다른 클라이언트에서는 보낸 메시지가 메시지 목록에 표시됩니다.

이렇게 하면 동시에 그룹 채팅을 하는 여러 클라이언트를 시뮬레이션하고 메시지 보내기 및 받기를 테스트할 수 있습니다. 서버 측이 그룹 채팅 로직을 처리하도록 올바르게 구성되었는지 확인하고 필요에 따라 상황에 맞게 코드를 수정하십시오.

2023/8/29 20:56:54

위의 코드에 따라 서버와 클라이언트의 코드 요구 사항을 최적화하십시오.클라이언트는 서버에 연결할 때 그룹 번호를 지정할 수 있습니다.

2023/8/29 21:05:40

다음은 클라이언트가 서버에 접속할 때 그룹 번호를 지정할 수 있도록 최적화된 서버 및 클라이언트 코드입니다.

서버측(Django) 코드:

파이썬

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

클라이언트(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>

서버측 코드에서는 group_idURL 라우팅의 매개변수를 사용하여 클라이언트 연결 요청에 지정된 그룹 번호를 얻습니다. 그런 다음 group_add메소드를 통해 적절한 그룹에 연결을 추가하고 메시지가 수신되면 group_send메소드를 사용하여 그룹의 모든 구성원에게 메시지를 보냅니다.

클라이언트 코드에서 groupID참여할 그룹 번호를 지정하는 변수를 추가했습니다. 수명 주기 후크 에서는 mounted그룹 번호를 매개변수로 connectWebSocket함수에 전달합니다. 이렇게 하면 클라이언트가 지정된 그룹에 연결되어 메시지를 주고받을 수 있습니다.

실제 상황에 따라 코드를 수정하고 서버측 코드와 클라이언트측 코드가 일치하는지 확인하세요.

2023/8/29 21:08:10

websocket.js는 아직 업데이트되지 않았습니다.

내보내기 함수 connectWebSocket(groupID) { 소켓태스크 = uni.connectSocket({ url: 'ws://localhost:8000/ws/chat/, // 서버 주소로 교체 성공() { console.log("초기화 완료! " ) } }) }

groupID를 URL 경로에 어떻게 전달합니까?

2023/8/29 21:20:42

groupIDURL 경로를 전달하려면 문자열 연결이나 템플릿 문자열을 사용하여 동적으로 URL을 작성할 수 있습니다 . 샘플 코드는 다음과 같습니다.

자바스크립트

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

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

위의 예에서 매개변수는 URL의 경로 부분에 있는 템플릿 문자열을 사용하여 URL 에 삽입 ${groupID}됩니다 . groupID이러한 방식으로 groupID값은 실제 매개변수 값으로 동적으로 대체되고 WebSocket URL로 전달됩니다. groupID올바른 URL을 생성하려면 값이 유효한지 확인하세요 .

서버는 django websocket을 사용하고 클라이언트는 uniapp을 사용하는데, 서버와 클라이언트 그룹이 서로 메시지를 보내기 위한 코드 작성 방법에 대한 참고사항을 알려주세요.

추천