サーバーは django websocket を使用し、クライアントは uniapp を使用します。サーバーとクライアントグループが相互にメッセージを送信するためのコードの記述方法に関する参考資料を提供してください。

2023/8/29 19:21:11

サーバーは django websocket を使用し、クライアントは uniapp を使用します。サーバーグループとクライアントグループが相互にメッセージを送信するためのコードを作成するにはどうすればよいですか?

2023/8/29 19:22:25

サーバー側で Django WebSocket を使用し、クライアント側で Uniapp を使用する場合、サーバーとクライアントの間でグループメッセージングを実装するコード例を以下に示します。

サーバー側コード(Django Channels ライブラリを使用):

まず、Django の settings.py ファイルでチャネルを構成します。

パイソン

# settings.py

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

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

ファイルを作成しconsumers.py、WebSocket コンシューマクラスを定義します。

パイソン

# 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 サービスファイルを作成します。

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

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

uniapp を使用して、django websocket にメッセージを送信するためのインターフェイスを作成してください。

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 ファイルに次のコードを追加してください。

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

このコードでは、WebSocket からのメッセージをリッスンするメソッドを使用しuni.onSocketMessage、メッセージを受信すると、そのメソッドを介して名前付きのイベント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

WeChatのような入力ボックスとボタンを修正してください

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 サーバーに接続されていることを確認します。
最初のクライアントにニックネームを入力し、「グループに参加」ボタンをクリックします。
別のクライアントアプリを開き、同じグループ名を使用します (たとえば、同じグループ名を入力するか、同じニックネームを使用します)。
「グループに参加」ボタンをクリックします。
これで、任意の 1 つのクライアントにメッセージを入力し、他のすべてのクライアントでメッセージを受信できるようになります。

このようにして、グループチャットで複数のユーザーを同時にシミュレートし、メッセージの送受信をテストできます。

正しくテストできるようにするには、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 はまだ更新されていません

import function connectWebSocket(groupID) {ソケットTask = uni.connectSocket({ url: 'ws://localhost:8000/ws/chat/, // サーバーアドレスに置き換えます success() { console.log("初期化が完了しました! " ) } }) }

groupID を URL パスに渡すにはどうすればよいですか?

2023/8/29 21:20:42

groupIDURL パスを渡すには、文字列連結またはテンプレート文字列を使用して URL を動的に構築できます。サンプルコードは次のとおりです。

JavaScript

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 を使用します。サーバーとクライアント グループが相互にメッセージを送信するためのコードの記述方法に関する参考資料を提供してください。

おすすめ

サーバーは django websocket を使用し、クライアントは uniapp を使用します。サーバーとクライアントグループが相互にメッセージを送信するためのコードの記述方法に関する参考資料を提供してください。