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
    )
})

总结

1. 下载
2. 注册到setting.py里的app
3. 在setting.py同级的目录下注册channels使用的路由----->routing.py
4. 将routing.py注册到setting.py
5. 把urls.py的路由注册到routing.py里
6. 编写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