用代码详解Django如何实现Websocket广播、点对点发送消息

django-admin startprobject ChannelsReady

# routing.py
from channels.routing import ProtocolTypeRouter

application = ProtocolTypeRouter({
 # 暂时为空
})

INSTALLED_APPS = [
 'channels'
]

ASGI_APPLICATION = "ChannelsReady.routing.application"

python manage.py startapp chats

INSTALLED_APPS = [
 'chats',
 'channels'
]

from channels.generic.websocket import WebsocketConsumer
# 这里除了 WebsocketConsumer 之外还有
# JsonWebsocketConsumer
# AsyncWebsocketConsumer
# AsyncJsonWebsocketConsumer
# WebsocketConsumer 与 JsonWebsocketConsumer 就是多了一个可以自动处理JSON的方法
# AsyncWebsocketConsumer 与 AsyncJsonWebsocketConsumer 也是多了一个JSON的方法
# AsyncWebsocketConsumer 与 WebsocketConsumer 才是重点
# 看名称似乎理解并不难 Async 无非就是异步带有 async / await
# 是的理解并没有错,但对与我们来说他们唯一不一样的地方,可能就是名字的长短了,用法是一模一样的
# 最夸张的是,基类是同一个,而且这个基类的方法也是Async异步的

class ChatService(WebsocketConsumer):
 # 当Websocket创建连接时
 def connect(self):
 pass
 
 # 当Websocket接收到消息时
 def receive(self, text_data=None, bytes_data=None):
 pass
 
 # 当Websocket发生断开连接时
 def disconnect(self, code):
 pass

from django.urls import path
from chats.chatService import ChatService
websocket_url = [
 path("ws/",ChatService)
]

from channels.routing import ProtocolTypeRouter,URLRouter
from chats.urls import websocket_url

application = ProtocolTypeRouter({
 "websocket":URLRouter(
 websocket_url
 )
})

<template>
 <div>
 <input type="text" v-model="message">
 <p><input type="button" @click="send" value="发送"></p>
 <p><input type="button" @click="close_socket" value="关闭"></p>
 </div>
</template>


<script>
export default {
 name:'websocket1',
 data() {
 return {
  message:'',
  testsocket:''
 }
 },
 methods:{
 send(){
  
 // send 发送信息
 // close 关闭连接

  this.testsocket.send(this.message)
  this.testsocket.onmessage = (res) => {
  console.log("WS的返回结果",res.data);  
  }

 },
 close_socket(){
  this.testsocket.close()
 }

 },
 mounted(){
 this.testsocket = new WebSocket("ws://127.0.0.1:8000/ws/") 


 // onopen 定义打开时的函数
 // onclose 定义关闭时的函数
 // onmessage 定义接收数据时候的函数
 // this.testsocket.onopen = function(){
 // console.log("开始连接socket")
 // },
 // this.testsocket.onclose = function(){
 // console.log("socket连接已经关闭")
 // }
 }
}
</script>

socket_list = []

class ChatService(WebsocketConsumer):
 # 当Websocket创建连接时
 def connect(self):
 self.accept()
 socket_list.append(self)


 # 当Websocket接收到消息时
 def receive(self, text_data=None, bytes_data=None):
 print(text_data) # 打印收到的数据
 for ws in socket_list: # 遍历所有的WebsocketConsumer对象
 ws.send(text_data) # 对每一个WebsocketConsumer对象发送数据

<template>
 <div>
 <input type="text" v-model="message">
 <input type="text" v-model="user">

 <p><input type="button" @click="send" value="发送"></p>
 <p><input type="button" @click="close_socket" value="关闭"></p>
 </div>
</template>


<script>
export default {
 name:'websocket1',
 data() {
 return {
  message:'',
  testsocket:'',
  user:''
 }
 },
 methods:{
 send(){
  
 // send 发送信息
 // close 关闭连接
  var data1 = {"message":this.message,"to_user":this.user}
  
  this.testsocket.send(JSON.stringify(data1))
  this.testsocket.onmessage = (res) => {
  console.log("WS的返回结果",res.data);  
  }

 },
 close_socket(){
  this.testsocket.close()
 },
 generate_uuid: function() {
  var d = new Date().getTime();
  if (window.performance && typeof window.performance.now === "function") {
  d += performance.now(); //use high-precision timer if available
  }
  var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
  /[xy]/g,
  function(c) {
  var r = (d + Math.random() * 16) % 16 | 0;
  d = Math.floor(d / 16);
  return (c == "x" &#63; r : (r & 0x3) | 0x8).toString(16);
  }
  );
  return uuid;
 },

 },
 mounted(){
 var username = this.generate_uuid();
 console.log(username)
 this.testsocket = new WebSocket("ws://127.0.0.1:8000/ws/"+ username +"/") 
 console.log(this.testsocket)

 	this.testsocket.onmessage = (res) => {
  console.log("WS的返回结果",res.data);  
  }
 	
 // onopen 定义打开时的函数
 // onclose 定义关闭时的函数
 // onmessage 定义接收数据时候的函数
 // this.testsocket.onopen = function(){
 // console.log("开始连接socket")
 // },
 // this.testsocket.onclose = function(){
 // console.log("socket连接已经关闭")
 // }
 }
}
</script>

from channels.generic.websocket import WebsocketConsumer
user_dict ={}
list = []
import json
class ChatService(WebsocketConsumer):
 # 当Websocket创建连接时
 def connect(self):
 self.accept()
 username = self.scope.get("url_route").get("kwargs").get("username")
 user_dict[username] =self
 print(user_dict)

 # list.append(self)


 # 当Websocket接收到消息时
 def receive(self, text_data=None, bytes_data=None):
 data = json.loads(text_data)
 print(data)
 to_user = data.get("to_user")
 message = data.get("message")

 ws = user_dict.get(to_user)
 print(to_user)
 print(message)
 print(ws)
 ws.send(text_data)


 # 当Websocket发生断开连接时
 def disconnect(self, code):
 pass