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的更多相关文章

  1. Flask+WebSocket实现群聊与单聊功能

    在开始我们的程序代码之前,先来了解一下相关的基础知识: 1.什么是websocket? (1)WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket ...

  2. flask + websocket实现简单的单聊和群聊

    单聊 from flask import Flask,request,render_template from geventwebsocket.handler import WebSocketHand ...

  3. Python: Flask框架简单介绍

    接触Python之后我第一次听说Flask,我就根据自己搜罗的知识尽可能简洁的说出来.如果不准确的地方还请指正,谢谢. Flask是什么?             Flask是基于Python编写的微 ...

  4. 前端 - 轮询, 长轮训, websocket

    轮询 概念 ajax 轮询的原理很简单,让浏览器间隔几秒就发送一次请求,询问服务器是否有新信息 代码 function showUnreadNews() { $(document).ready(fun ...

  5. 实时 Django 终于来了 —— Django Channels 入门指南

    Reference: http://www.oschina.net/translate/in_deep_with_django_channels_the_future_of_real_time_app ...

  6. Django Channels 入门指南

    http://www.oschina.NET/translate/in_deep_with_django_channels_the_future_of_real_time_apps_in_django ...

  7. 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 ...

  8. python 全栈之路

    目录 Python 全栈之路 一. Python 1. Python基础知识部分 2. Python -函数 3. Python - 模块 4. Python - 面对对象 5. Python - 文 ...

  9. WebSocket with Flask

    转自:https://blog.shonenada.com/post/websocket-with-flask/ WebSocket with Flask HTML5 以前,HTML 还不支持 Web ...

随机推荐

  1. 做了面向互联网部署的Dynamics 365 CE更改AD FS的登录页面

    摘要: 微软动态CRM专家罗勇 ,回复306或者20190307可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 默认情况下A ...

  2. 从.Net到Java学习第三篇——spring boot+mybatis+mysql

    从.Net到Java学习第一篇——开篇 环境:mysql5.7 新建mysql数据库demo,然后执行如下sql脚本进行数据表创建和数据初始化: -- ------------------------ ...

  3. 如何正确使用Espresso来测试你的Android程序

    UI测试在Android平台上一直都是一个令人头痛的事情, 由于大家平时用的很少, 加之很多文档的缺失, 如果很多东西从头摸索,势必踩坑无数. 自Android24正式淘汰掉了Instrumentat ...

  4. join的简单总结

    BAT面试题:现在有T1.T2.T3三个线程,你怎样保证T2在T1执行完后执行,T3在T2执行完后执行? 这个线程问题通常会在第一轮或电话面试阶段被问到,目的是检测你对”join”方法是否熟悉.这个多 ...

  5. iOS 开发 nonatomic 和 atomic

    nonatomic : 非原子属性 atomic    : 原子属性  如果不写关键字 那么默认就是 原子属性 - 多线程写入属性时,保证同一时间只有一个线程能够执行写入操作 - 单(线程)写多(线程 ...

  6. libstdc++适配Xcode10与iOS12

    编译报错 当你开心得升级完新 macOS,以及新 XCode,准备体验了一把 Dark Mode 编程模式,开心的打开自己的老项目的时候,发现编译不通过了╮(╯_╰)╭ 如果你的工程中如果依赖 lib ...

  7. ABAP 7.53 中的ABAP SQL（原Open SQL）新特性

    S/4 HANA 1809 已经在上月发布,随之而来的是ABAP 7.53. 本文是更新文档中ABAP SQL的部分的翻译. 本次更新的内容较多,主要内容包括:Open SQL更名为ABAP SQL: ...

  8. JS第三部分--BOM浏览器对象模型

    一.client系列:宽高边框 二.offset系列:偏移 三.scroll系列 四.BOM的介绍 4.1.打开新窗口 4.2.location对象(本地信息对象) 4.3.history对象 4.4 ...

  9. .NET CORE学习笔记系列(3)——ASP.NET CORE多环境标识

    在开发项目的过程当中,生产环境与调试环境的配置是不一样的.比如连接字符串. ASP .NET CORE 支持利用环境变量来动态配置 JSON 文件.ASP.NET Core 引用了一个特定的环境变量  ...

  10. sbt安裝與配置

    官方下載地址:https://www.scala-sbt.org/download.html?spm=a2c4e.11153940.blogcont238365.9.42d147e0iF8dhv 解压 ...