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. Parcelable encountered IOException writing serializable object

    异常: java.lang.RuntimeException: Parcelable encountered IOException writing serializable object 这是在in ...

  2. MySQL InnoDB下关于MVCC的一个问题的分析

      这个是网友++C++在群里问的一个关于MySQL的问题,本篇文章实验测试环境为MySQL 5.6.20,事务隔离级别为REPEATABLE-READ ,在演示问题前,我们先准备测试环境.准备一个测 ...

  3. AngularJS学习之旅—AngularJS Table(十一)

    1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...

  4. 5分钟了解TypeScript

    1.安装TypeScript 有两种方式安装TypeScript: Via npm 通过安装VS插件,更多可参见这里. 对于npm用户,可以直接使用下面的命令行安装: nmp install -g T ...

  5. telnet操作memcache

    1.使用方法 1. 连接到memcached telnet 192.168.1.100 11211 add name 0 60 5     [说明 add 是指令名  name 是key的名字 (是以 ...

  6. 如何删除windows中运行的历史记录

    参照下图进入到注册表,依次打开红圈中的路径,在RunMRU里面列出来的全部是记录,全部删除即可

  7. 【Python 11】汇率兑换4.0（函数）

    1.案例描述 设计一个汇率换算程序,其功能是将美元换算成人民币,或者相反. 2.0增加功能:根据输入判断是人民币还是美元,进行相应的转换计算 3.0增加功能:程序可以一直运行,知道用户选择退出 4.0 ...

  8. slice()和splice()区别

    1.slice(start,end):方法可从已有数组中返回选定的元素,返回一个新数组,包含从start到end(不包含该元素)的数组元素. 注意:该方法不会改变原数组,而是返回一个子数组,如果想删除 ...

  9. c++11のunique_lock和once_flag

    一. Unique _lock和lockguard一样,到那时比lockguard更加灵活,可以随时按照需要加锁开锁 std::unique_lock<std::mutex> locker ...

  10. Django-CRM项目学习（五）-stark的action以及多级筛选功能

    1.stark的组件之action(自定制函数多选功能效果) 1.1  admin效果 1.2 多选效果前端和后端进行的操作 1.2.1 前端发过来的参数是?号后各个参数用&来拼接 1.2.2 ...