Django 實現 Websocket 廣播、點對點發送訊息的程式碼
阿新 • • 發佈：2020-06-04
1.Django實現Websocket
使用Django來實現Websocket服務的方法很多在這裡我們推薦技術最新的Channels庫來實現
1.1.安裝DjangoChannels
Channels安裝如果你是Windows作業系統的話,那麼必要條件就是Python3.7
pip install channels
1.2.配置DjangoChannels
1.建立專案ChannelsReady
django-admin startprobject ChannelsReady
2.在專案的settings.py同級目錄中,新建檔案routing.py
# routing.py
from channels.routing import ProtocolTypeRouter
application = ProtocolTypeRouter({
# 暫時為空
})3.在專案配置檔案settings.py中寫入
INSTALLED_APPS = [ 'channels' ] ASGI_APPLICATION = "ChannelsReady.routing.application"
1.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,這樣就算啟動完成了
1.4.建立Websocket服務
1.建立一個新的應用chats
python manage.py startapp chats
2.在settings.py
chats
INSTALLED_APPS = [ 'chats','channels' ]
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
1.5.為Websocket處理物件增加路由
1.在chats應用中,新建urls.py
from django.urls import path
from chats.chatService import ChatService
websocket_url = [
path("ws/",ChatService)
]
2.回到專案routing.py檔案中增加ASGI非HTTP請求處理
from channels.routing import ProtocolTypeRouter,URLRouter
from chats.urls import websocket_url
application = ProtocolTypeRouter({
"websocket":URLRouter(
websocket_url
)
})
總結：
- 下載
- 註冊到setting.py裡的app
- 在setting.py同級的目錄下注冊channels使用的路由----->routing.py
- 將routing.py註冊到setting.py
- 把urls.py的路由註冊到routing.py裡
- 編寫wsserver.py來處理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>
3.廣播訊息
3.1客戶端保持不變，同時開啟多個客戶端
3.2服務端儲存每個連結的物件
socket_list = [] class ChatService(WebsocketConsumer): # 當Websocket建立連線時 def connect(self): self.accept() socket_list.append(self) # 當Websocket接收到訊息時 def receive(self,bytes_data=None): print(text_data) # 列印收到的資料 for ws in socket_list: # 遍歷所有的WebsocketConsumer物件 ws.send(text_data) # 對每一個WebsocketConsumer物件傳送資料
4.點對點訊息
4.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',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的返回結果",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>
4.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,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
總結
到此這篇關於Django 實現 Websocket 廣播、點對點發送訊息的文章就介紹到這了,更多相關Django 實現 Websocket 廣播、點對點發送訊息內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！