#导报

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=""/><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();

        }

websocket ----简介，以及demo的更多相关文章

  1. 【HTML5】HTML5 WebSocket简介以及简单示例

    互联网发展到现在,早已超越了原始的初衷,人类从来没有像现在这样依赖过他:也正是这种依赖,促进了互联网技术的飞速发展.而终端设备的创新与发展,更加速了互联网的进化: HTTP/1.1规范发布于1999年 ...

  2. WebSocket消息推送(实现进行聊天)和WebSocket简介

    WebSocket简介 WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.依靠这种技术可以实现客户端和服务器端的长连接,双向实时通信.特点:事件驱动异步使用ws或者 ...

  3. 基于websocket vue 聊天demo 解决方案

    基于websocket vue 聊天demo 解决方案 demo 背景 电商后台管理的客服 相关技术 vuex axios vue websocket 聊天几种模型 一对一模型 一对一 消息只一个客户 ...

  4. WebSocket聊天室demo

    根据Socket异步聊天室修改成WebSocket聊天室 WebSocket特别的地方是 握手和消息内容的编码.解码(添加了ServerHelper协助处理) ServerHelper: using ...

  5. Disruptor并发框架（一）简介&上手demo

    框架简介 Martin Fowler在自己网站上写了一篇LMAX架构的文章,在文章中他介绍了LMAX是一种新型零售金融交易平台,它能够以很低的延迟产生大量交易.这个系统是建立在JVM平台上,其核心是一 ...

  6. [tornado]websocket 最简单demo

    想法 前两天想看看django 长轮询或者是websocket的方案,发现都不太好使. tornado很适合做这个工作,于是找了些资料,参照了做了个最简单demo,以便备用. 具体的概念就不说了,to ...

  7. PyQt5简介及demo

    PyQt5说明 pyqt5是一套Python绑定Digia QT5应用的框架.它可用于Python 2和3.本教程使用Python 3.Qt库是最强大的GUI库之一.pyqt5的官方网站http:// ...

  8. php WebSocket 简单实现demo

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据. 在 ...

  9. 基于websocket的netty demo

    前面2文 基于http的netty demo 基于socket的netty demo 讲了netty在http和socket的使用,下面讲讲netty如何使用websocket websocket是h ...

随机推荐

  1. mysql & sqlserver语法差异

    isnull   vs   ifnull dateadd  vs date_add limit vs  top

  2. TensorFlow升级到1.13

    win10下: 安装后import tensorflow出错:tensorflow/python/lib/core/bfloat16.cc:675] Check failed: PyBfloat16_ ...

  3. HDU-4763 Theme Section KMP

    题意:求最长的子串E,使母串满足EAEBE的形式,A.B可以任意,并且不能重叠. 题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=4763 思 ...

  4. node-sass 不能正常安装解决办法

    web前端在安装node包时,总是报错,究其原因是node-sass没有被正常安装. 根本原因是国内网络的原因. 最终的解决方法是通过淘宝的npm镜像安装node-sass 首先安装cnpm npm ...

  5. python的语法小结之生成器和迭代器

    生成器: 首先介绍一下列表生成式:a=[x for x in range(10)]               >>>>>>[0, 1, 2, 3, 4, 5, 6 ...

  6. RANSAC

    一.概述 RANSAC(RANdom SAmple Consensus)随机抽样一致,是用来从一组观测数据中估计数学模型参数的一种方法.由于是观测数据,避免不了有误差存在,当误差太大了就变成了无效数据 ...

  7. 第七周助教工作总结——NWNU李泓毅

    本周应批改作业0,实批改作业0 因本周开始软工团队项目,故本周几位助教正在制定团队项目题目并且处理相关工作. 这一次的作业将于4月17日前进行提交,作业为软件研发团队的组建.

  8. php-fpm 配置中pm的选择

    另附豆瓣技术贴:https://www.douban.com/note/315222037/ 1.php-fpm优化参数介绍他们分别是:pm.pm.max_children.pm.start_serv ...

  9. sjms-2 创建型模式

    设计模式分类 创建型模式(5种):工厂方法模式.抽象工厂模式.创建者模式.原型模式.单例模式结构型模式(7种):适配器模式.桥模式.组合模式.装饰模式.外观模式.享元模式.代理模式行为型模式(11种) ...

  10. Web Service CXF的工作流程

    我们一起走进系统的内部,跟随每一个调用,去透视系统的每一个层面. 一.我们定义整个目录都在CXFServlet的监控之下 <servlet> <servlet-name>CXF ...