websocket ----简介，以及demo

#导报

from dwebsocket.decorators import accept_websocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

现在，很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。

在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯

1. http协议是用在应用层的协议，他是基于tcp协议的，http协议建立链接也必须要有三次握手才能发送信息。

　　http链接分为短链接，长链接，短链接是每次请求都要三次握手才能发送自己的信息。即每一个request对应一个response。长链接是在一定的期限内保持链接。保持TCP连接不断开。客户端与服务器通信，必须要有客户端发起然后服务器返回结果。客户端是主动的，服务器是被动的。

2. WebSocket

　　WebSocket他是为了解决客户端发起多个http请求到服务器资源浏览器必须要经过长时间的轮训问题而生的，他实现了多路复用，他是全双工通信。在webSocket协议下客服端和浏览器可以同时发送信息。

建立了WenSocket之后服务器不必在浏览器发送request请求之后才能发送信息到浏览器。这时的服务器已有主动权想什么时候发就可以发送信息到服务器。而且信息当中不必在带有head的部分信息了与http的长链接通信来说，这种方式，不仅能降低服务器的压力。而且信息当中也减少了部分多余的信息。　　

首先下你下载这个库 websocket

下面是一些简单的demo：

#接受前端信息
@accept_websocket
def test_socket(request):

    global data

    if request.is_websocket():

        for message in request.websocket:

            data = message.decode()

            # request.websocket.send(message)


@accept_websocket
def test_websocket(request):

    global data
    print(data)

    if request.is_websocket():

        while 1:

            if data:

                time.sleep(1) ## 向前端发送时间

                dit = {
                    'time':time.strftime('%Y.%m.%d %H:%M:%S',time.localtime(time.time())),'data':data
                }

                request.websocket.send(json.dumps(dit))

            data = ''

# 路由

    #推送消息测试
    path('socket_test',TemplateView.as_view(template_name='md_admin/socket.html')),

# 推送信息

path('test_socket',test_socket),

path('test_websocket',test_websocket),

#socket.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Room</title>
</head>
<body>
    <input id="chat-message-input" type="text" size="100"/><br/>
    <input id="chat-message-submit" type="button" value="Send" onclick='sendmessage()'/>
</body>
<script>
   
   //生成socket对象
   var socket = new WebSocket("ws:" + window.location.host + "/md_admin/test_socket");


            socket.onopen = function () {
                console.log('WebSocket open');//成功连接上Websocket
            };
            socket.onmessage = function (e) {
                console.log('message: ' + e.data);//打印服务端返回的数据
            };
            socket.onclose=function(e){
              console.log(e);
              socket.close(); //关闭TCP连接
            };
            if (socket.readyState == WebSocket.OPEN){
            socket.onopen();
            }

            window.s = socket;

function sendmessage(){

    window.s.send(document.getElementById("chat-message-input").value);

}

    
</script>
</html>

要先跨域使用的话可以指定域名这个是接收消息的 js方法

   //生成socket对象
        var socket = new WebSocket("ws:localhost:8000/md_admin/test_websocket");

        
        socket.onopen = function () {
            console.log('WebSocket open');//成功连接上Websocket
        };
        socket.onmessage = function (e) {
            console.log('messageaa: ' + e.data);//打印服务端返回的数据
            let data = $.parseJSON(e.data).data
            alert(data)
            $("#message").show().html(data)
        };
        socket.onclose=function(e){
        console.log(e);
        socket.close(); //关闭TCP连接
        };
        if (socket.readyState == WebSocket.OPEN){
        socket.onopen();
        }