Websocket全雙工通訊技術

WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通訊的網絡技術。基於TCP協議，其目的是在WebSocket應用和WebSocket服務器進行頻繁雙向通信時，可以使服務器避免打開多個HTTP連接進行工作來節約資源，提高了工作效率和資源利用率。

Websocket介紹

如何產生？

因互聯網技術越發的成熟，用戶的需求越來越高，由起初的靜態頁面，逐漸發展爲動態頁面，頁面的內容根據用戶需求的不同而個有差異，這也造成了服務器壓力愈重，爲了緩解服務器的壓力催生了各種解決的辦法

Websocket之前的解決辦法：
輪詢客戶端設置時間間隔，到達設置時間後，客戶端向服務器發送一個request請求，查詢是否有更新數據，服務器則立刻返回響應，併發送更新的數據
長輪詢 與輪詢類似，客戶端請求更新的數據，服務器接受到請求後，會阻塞請求，並等到有數據更新時再返回，客戶端拿到數據後重新請求
這兩種方法的特點，是客戶端不斷髮送請求，等待服務器，服務器體現的是一種被動式的，這會非常損耗寬帶和服務器資源

而websocket協議，則是第一次HTTP請求建立連接時，便不再發送request請求，減少了服務器的壓力
同時，websocket具有多路複用的功能，即不同的url公用一個websocket連接，因爲它借用了HTTP協議的一些概念，所以被稱爲了WebSocket
值得一提的是，WebSocket的連接是雙向通信的連接，在同一個TCP連接上，既可以發送，也可以接收。

websocket實現實時通訊

WebSocket是一種在單個TCP連接上進行全雙工通信的協議。
WebSocket使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。

Django實現Websocket

使用Django來實現Websocket服務的方法很多在這裏我們推薦技術最新的Channels庫來實現

安裝DjangoChannels

Channels安裝如果你是Windows操作系統的話,那麼必要條件就是Python3.7

pip install channels

配置DjangoChannels

創建項目ChannelsReady

django-admin startprobject ChannelsReady

在項目的settings.py同級目錄中,新建文件routing.py

# routing.py
from channels.routing import ProtocolTypeRouter

application = ProtocolTypeRouter({
    # 暫時爲空
})

在項目配置文件settings.py中寫入

INSTALLED_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服務

創建一個新的應用chats

python manage.py startapp chats

在settings.py中註冊chats

INSTALLED_APPS = [
    'chats',
    'channels'
]

在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

爲Websocket處理對象增加路由

在chats應用中,新建urls.py

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

回到項目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請求

websocket客戶端

基於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>

廣播消息

客戶端保持不變，同時打開多個客戶端

服務端存儲每個鏈接的對象

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

Websocket全雙工通訊技術 - 邱乘屹的個人技術博客