websocket

概念

是一套协议，协议规定了：

　　- 连接时需要握手

　　- 发送数据进行加密

　　- 连接之后不断开

意义

　　实现长轮询等操作

框架支持

- flask，gevent-websocket

- django，channel

- torando框架自带

应用场景

实时响应页面时，可以使用websocket。

缺点

兼容性比较差，版本较低的IE无法支持

使用方法

导入

from geventwebsocket.handler import WebSocketHandler

from gevent.pywsgi import WSGIServer

启动

Flask 的启动的地方改成这样即可以支持 websocket ，同时并不会覆盖 http ，两者并存

if __name__ == '__main__':

    http_server = WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)

    http_server.serve_forever()

后端操作

ws = request.environ.get('wsgi.websocket')  # 要拿到websocket 的标识才可以操作

msg = ws.receive() # 从客户端接收消息

ws.send("你好啊") # 向客户端发送消息

前端操作

var ws = new WebSocket('ws://127.0.0.1:5000/message')  　　// 不定义的话默认就是 HTTP，定义后往指定的url 发起 websocket 链接请求

ws.onmessage = function (event) {　　// 服务器端向客户端发送数据时，自动执行

    var response = JSON.parse(event.data); 　　 // 接收服务端的数据

};

ws.send("你好呀") 　　// 向服务端发送消息

示例

前端

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <h1>丑男投票系统</h1>

    <ul>

        {% for k,v in users.items() %}

            <li onclick="vote({{k}})" id="id_{{k}}">{{v.name}}<span>{{v.count}}</span></li>

        {% endfor %}

    </ul>

    <script src="{{ url_for('static',filename='jquery-3.3.1.min.js')}}"></script>

    <script>

        var ws = new WebSocket('ws://127.0.0.1:5000/message')

        ws.onmessage = function (event) {

            /* 服务器端向客户端发送数据时，自动执行 */

            // {'cid':cid,'count':new}

            var response = JSON.parse(event.data);

            $('#id_'+response.cid).find('span').text(response.count);

        };

        function vote(cid) {

            ws.send(cid)  // 发送信息

        }

    </script>

</body>

</html>

后端

from flask import Flask,render_template,request

from geventwebsocket.handler import WebSocketHandler

from gevent.pywsgi import WSGIServer

import json

app = Flask(__name__)

USERS = {

    '':{'name':'钢弹','count':0},

    '':{'name':'铁锤','count':0},

    '':{'name':'贝贝','count':100},

}

# http://127.0.0.1:5000/index

@app.route('/index')

def index():

    return render_template('index.html',users=USERS)

# http://127.0.0.1:5000/message

WEBSOCKET_LIST = []

@app.route('/message')

def message():

    ws = request.environ.get('wsgi.websocket')

    if not ws:

        print('http')

        return '您使用的是Http协议'

    WEBSOCKET_LIST.append(ws)

    while True:

        cid = ws.receive()  # 接收信息

        if not cid:

            WEBSOCKET_LIST.remove(ws)

            ws.close()

            break

        old = USERS[cid]['count']

        new = old + 1

        USERS[cid]['count'] = new

        for client in WEBSOCKET_LIST:

            client.send(json.dumps({'cid':cid,'count':new}))

if __name__ == '__main__':

    http_server = WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)

    http_server.serve_forever()

Flask websocket的更多相关文章

Flask+WebSocket实现群聊与单聊功能
在开始我们的程序代码之前,先来了解一下相关的基础知识: 1.什么是websocket? (1)WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket ...
flask + websocket实现简单的单聊和群聊
单聊 from flask import Flask,request,render_template from geventwebsocket.handler import WebSocketHand ...
Python: Flask框架简单介绍
接触Python之后我第一次听说Flask,我就根据自己搜罗的知识尽可能简洁的说出来.如果不准确的地方还请指正,谢谢. Flask是什么? Flask是基于Python编写的微 ...
前端 - 轮询, 长轮训, websocket
轮询概念 ajax 轮询的原理很简单,让浏览器间隔几秒就发送一次请求,询问服务器是否有新信息代码 function showUnreadNews() { $(document).ready(fun ...
实时 Django 终于来了 —— Django Channels 入门指南
Reference: http://www.oschina.net/translate/in_deep_with_django_channels_the_future_of_real_time_app ...
Django Channels 入门指南
http://www.oschina.NET/translate/in_deep_with_django_channels_the_future_of_real_time_apps_in_django ...
Python 目录指引
1.0 Python 基础整合 1.1 变量 1.2 数据类型 1.3 基础语法 1.4 文件操作 1.5 函数 1.6 生成器 1.7 迭代器 1.8 装饰器 1.9 字符集 2.0 Python ...
python 全栈之路
目录 Python 全栈之路一. Python 1. Python基础知识部分 2. Python -函数 3. Python - 模块 4. Python - 面对对象 5. Python - 文 ...
WebSocket with Flask
转自:https://blog.shonenada.com/post/websocket-with-flask/ WebSocket with Flask HTML5 以前,HTML 还不支持 Web ...

随机推荐

【Dojo 1.x】笔记5 使用本地引用
习惯用CDN引用的同学肯定会知道还有一种叫本地引用,这篇笔记测试本地引用. Dojo SDK下载地址:点我下载中间的Release Package即可,如果希望下载完整包(Full Source), ...
iOS----------常见宏定义
在我们日常的项目中,合理的使用宏定义,会大大减少我们的代码量,以及代码的可读性,为方便读者使用,总结如下: pragma mark - Application相关 ///=============== ...
OpenCL中的half与float的转换
在kernel中使用half类型可以在牺牲一定精度的代价下来提升运算速度. 在kernel中, 可以比较方便的对half数据进行计算, 但在host上的, 对half的使用就没那么方便了. 查看cl_ ...
Android ScrollView和ListView滑动冲突解决记录
private int mLastX; private int mLastY; public View.OnTouchListener onTouchListener = new View.OnTou ...
从0开始的Python学习004小的总结与补充
没有时间?快速阅读: Python确实是一种十分精彩又强大的语言. Python是程序.脚本或者软件 python helloworld.py运行你的Python help()帮助你的Python 命 ...
Github上如何查看当前最流行的开源项目
先声明下:只针对初学者,大神的话勿喷. 针对题标的这个问题,按照如下步骤操作即可: 进入Github网站后,显示的页面如下所示: 点击"Explore"链接,进入如下页面: 页面上 ...
Windows server 2012 R2 部署WSUS补丁服务
一.WSUS 安装要求 1.硬件要求: 对于多达 13000 个客户端的服务器,建议使用以下硬件:* 4 Core E5-2609 2.1GHz 的处理器* 8 GB 的 RAM 2.软件要求: 要使 ...
git冲突解决办法合集
一换行符CRLF错误解决办法 1 错误产生原因不同的操作系统使用的换行符是不一样的. unix/linux使用的是LF,max后期也采用了LF,但在windows一直采用的CRLF(回车)换行符. ...
【English】20190416
anti-money laundering反洗钱[ˈænti][ˈlɔːndərɪŋ] misconduct不当行为[ˌmɪsˈkɑːndʌkt] Currently, she is focus ...
关于vue-router中点击浏览器前进后退地址栏路由变了但是页面没跳转
情景: 在进行正常页面跳转操作后(页面A跳转到页面B),点击浏览器的左上角的‘后退’按钮,点击后,可以看到url地址已经发生了变化(url由页面B变为页面A),hash值也已经是上一页的路由,但是浏览 ...

Flask websocket