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. 如何解决angular不自动生成spec.ts文件

    "schematics":{   "@schematics/angular:component": {        "styleext": ...

  2. float与double

    对数值类型的细节了解在大学里就是一带而过,自己始终也没好好看过.这是在csdn上看到的一篇文章,挺好的,记录下来. https://blog.csdn.net/Demon__Hunter/articl ...

  3. 使用Python下载工具you-get下载媒体文件

    You-Get是一个基于 Python 3 的下载工具.使用 You-Get 可以很轻松的下载到网络上的视频.图片及音乐. 使用you-get下载媒体文件 1.安装Python(步骤详情见另一篇文章) ...

  4. 腾讯云服务器配置node环境

    1:更新现有包 sudo apt-get update 2:安装依赖 sudo apt-get install vim openssl build-essential libssl-dev wget ...

  5. Vue一个案例引发「动画」的使用总结

    项目开发中动画有着很重要的作用,而且也是用到的地方非常多,例如:鼠标的进入离开,弹窗效果,组件的显示隐藏,列表的切换等等,可以说我们网页上的动画无处不在,也有人说了,这些东西也可以不使用动画. 对,你 ...

  6. 修改vue element Transfer 穿梭框里内容区的宽度

    <template> <el-transfer v-model="value1" :data="data"></el-transf ...

  7. 数字信号处理专题（1）——DDS函数发生器环路Demo

    一.前言 会FPGA硬件描述语言.设计思想和接口协议,掌握些基本的算法是非常重要的,因此开设本专题探讨些基于AD DA数字信号处理系统的一些简单算法,在数字通信 信号分析与检测等领域都会或多或少有应用 ...

  8. SQLServer无法删除登录名'***'，因为该用户当前正处于登录状态解决方法

    问题描述: sqlserver在删除登录名的时候提示删除失败 标题: Microsoft SQL Server Management Studio -------------------------- ...

  9. sqlserver日期函数大全

    一,统计语句 1, - 统计当前[>当天00点以后的数据] SELECT * FROM 表 WHERE CONVERT(Nvarchar, dateandtime, 111) = CONVERT ...

  10. mysql_报错1418

    报错如下: 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration a ...