Websocket 即時通訊
1.需求
即時通訊工具一定要保障的是即時性
基於現在的通訊協議HTTP要如何保障即時性呢?
2.短連接型
基於HTTP短連接如何保障數據的即時性
HTTP的特性就是無狀態的短連接,即一次請求一次響應斷開連接失憶,這樣服務端就無法主動的去尋找客戶端給客戶端主動推送消息
1.輪詢
即:客戶端不斷向服務器發起請求索取消息
優點:基本保障消息即時性
缺點:大量的請求導致客戶端和服務端的壓力倍增
2.長輪詢
即:客戶端向服務器發起請求,在HTTP最大超時時間內不斷開請求獲取消息,超時后重新發起請求
優點:基本保障消息即時性
缺點:長期占用客戶端獨立線程,長期占用服務端獨立線程,服務器壓力倍增
3.長連接型
基於socket長連接,由於長連接是雙向且有狀態的保持連接,所以服務端可以有效的主動的向客戶端推送數據
1.socketio長連接協議
優點:消息即時,兼容性強
缺點:接入復雜度高,為保障兼容性冗余依賴過多較重
2.websocket長連接協議
優點:消息即時,輕量級,靈活適應多場景,機制更加成熟
缺點:相比socketio兼容性較差
總體來說,Socketio緊緊只是為了解決通訊而存在的,而Websocket是為了解決更多更復雜的場景通訊而存在的。
這里推薦Websocket的原因是因為,我們的Django框架甚至是Flask框架,都有成熟的第三方庫
Django實現Websocket
使用Django來實現Websocket服務的方法很多在這里我們推薦技術最新的Channels庫來實現
安裝DjangoChannels
Channels安裝如果你是Windows操作系統的話,那么必要條件就是Python3.7
pip install channels==2.4.0
配置DjangoChannels
1.創建項目ChannelsReady
django-admin startprobject ChannelsReady
2.在項目的settings.py同級目錄中,新建文件routing.py
#####routing.py##### from channels.routing import ProtocolTypeRouter application = ProtocolTypeRouter({ # 暫時為空 })
3.在項目配置文件settings.py中寫入
######Ssettings.py######## NSTALLED_APPS = [ 'channels' ] ASGI_APPLICATION = "ChannelsReady.routing.application"
注：啟動帶有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,這樣就算啟動完成了
創建Websocket服務
1.創建一個新的應用chats
python manage.py startapp chats
2.在settings.py中注冊chats
########settings.py######### INSTALLED_APPS = [ 'chats', 'channels' ]
3.在chats應用中新建文件chatService.py（用來寫websocket相關的處理的代碼）
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
為Websocket處理對象增加路由
1.在chats應用中,新建urls.py
from django.urls import path from chats.chatService import ChatService websocket_url = [ path("ws/",ChatService) ]
2.回到項目
from channels.routing import ProtocolTypeRouter,URLRouter from chats.urls import websocket_url application = ProtocolTypeRouter({ "websocket":URLRouter( websocket_url ) })
看完了websocket在django端的實現，感覺有那么一丟丟的麻煩，各種該文件沒改配置，還有路由等等問題。一個腦袋兩個大。想想還有客戶端的websocket，啊，感覺生活已經沒有了樂趣，好想來瓶八二年的二鍋頭。不要急，請停下你出去買酒的腿，我vue對天發誓，我的websocket真的沒有那么復雜，我只需要簡簡單單的new一個數據類型就好了。不信，你接着看。
vue實現一個websocket鏈接
var testsocket = new WebSocket("ws://127.0.0.1:8000/ws/")
vue定義websocket連接時個狀態的函數
// onopen 定義打開時的函數 // onclose 定義關閉時的函數 // onmessage 定義接收數據時候的函數 testsocket.onopen = function(){ console.log("開始連接socket") }, testsocket.onclose = function(){ console.log("socket連接已經關閉") }
vue對websocket的操作
// send 發送信息 // close 關閉連接 testsocket.send("激動的心，顫抖的手，學完socket在喝酒")
基於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.onclose = function(){
// console.log("socket連接已經關閉")
// }
}
}
</script>
我們vue端不需要有什么改變，只需要開啟多個頁面作為消息的接受者
django端將在收到websocket連接的時候將所有的websocket連接加入到一個列表中，然后將收到的消息轉發給列表中的所有的用戶，這就是群發，廣播。
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對象發送數據
客戶端將用戶名拼接到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>
服務端存儲用戶名以及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