Websocket 即使通讯
1.websocket介绍
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。
2.目的
即时通讯,代替轮询
网站上的即时通讯是很常见的,比如网页的QQ,聊天系统等。按照以往的技术能力通常是采用轮询、Comet技术解决。
两种连接例子
1.短链接型
基于HTTP
短连接如何保障数据的即时性
HTTP
的特性就是无状态的短连接,即一次请求一次响应断开连接失忆,这样服务端就无法主动的去寻找客户端给客户端主动推送消息
1-1.轮询
即:客户端不断向服务器发起请求索取消息
优点:基本保障消息即时性
缺点:大量的请求导致客户端和服务端的压力倍增
1-2.长轮询
即:客户端向服务器发起请求,在HTTP
最大超时时间内不断开请求获取消息,超时后重新发起请求
优点:基本保障消息即时性
缺点:长期占用客户端独立线程,长期占用服务端独立线程,服务器压力倍增
2.长连接型
基于socket
长连接,由于长连接是双向且有状态的保持连接,所以服务端可以有效的主动的向客户端推送数据
2-1.socketio
长连接协议
优点:消息即时,兼容性强
缺点:接入复杂度高,为保障兼容性冗余依赖过多较重
2-2.websocket
长连接协议
优点:消息即时,轻量级,灵活适应多场景,机制更加成熟
缺点:相比socket
兼容性较差
总体来说,Socketio
紧紧只是为了解决通讯而存在的,而Websocket
是为了解决更多更复杂的场景通讯而存在的
这里推荐Websocket
的原因是因为,我们的Django
框架甚至是Flask
框架,都有成熟的第三方库
而且Tornado
框架集成Websocket
Django 实现 Websocket
使用Django
来实现Websocket
服务的方法很多在这里我们推荐技术最新的Channels
库来实现
1.安装Djangochannels
Channels
安装如果你是Windows
操作系统的话,那么必要条件就是Python3.7
pip install channels
2.配置DjangoChannels
2-1.在项目的settings.py
同级目录中,新建文件routing.py
# routing.py
from channels.routing import ProtocolTypeRouter
application = ProtocolTypeRouter({
# 暂时为空
})
2-2.在项目配置文件settings.py
中写入
INSTALLED_APPS = [
'channels'
]
ASGI_APPLICATION = "ChannelsReady.routing.application"
2-3.启动带有Channels
提供的ASGI
的Django
项目
You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
February 01, 2020 - 17:27:13
Django version 3.0.2, using settings 'ChannelsReady.settings'
Starting ASGI/Channels version 2.4.0 development server at http://0.0.0.0:8000/
Quit the server with CTRL-BREAK.
很明显可以看到ASGI/Channels
,这样就算启动完成了
3.创建websocket服务
3-1.创建一个新的应用chats
python manage.py startapp chats
3-2.在settings.py
中注册chats
INSTALLED_APPS = [
'chats',
'channels'
]
3-3.在chats
应用中新建文件chatService.py
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
4.为Websocket
处理对象增加路由
4-1.在chats
应用中,新建urls.py
from django.urls import path
from chats.chatService import ChatService
websocket_url = [
path("ws/",ChatService)
]
4-2.回到项目routing.py
文件中增加ASGI
非HTTP
请求处理
from channels.routing import ProtocolTypeRouter,URLRouter
from chats.urls import websocket_url
application = ProtocolTypeRouter({
"websocket":URLRouter(
websocket_url
)
})
5.Websocet客户端
5.1.基于vue的websocket客户端
<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.onmessage = function(res){
// console.log('socket消息',res.data)
//},
// this.testsocket.onclose = function(){
// console.log("socket连接已经关闭")
// }
}
}
</script>
6.广播消息
6.1客户端保持不变,同时打开多个客户端
6.2服务端存储每个链接的对象
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对象发送数据
7.点对点消息
7.1客户端将用户名拼接到url,并在发送的消息里指明要发送的对象
<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" ? 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>
7.2服务端存储用户名以及websocketConsumer,然后给对应的用户发送信息
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