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. Belgrade Azure 2019-2-11活动感悟

    这是<国外线下技术俱乐部建设>系列文章之一.   活动网址:https://www.meetup.com/Azure-UG-Srbija/events/258673179/ 活动内容:Az ...

  2. iOS----------常见经典错误

    最近使用cocoapods集成友盟  发现几个经典错误 1.clang: error: linker command failed with exit code 1 (use -v to see in ...

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

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

  4. 从零学习Fluter(二):win10上环境搭建以及模拟器和真机调试

    今天呢,又继续看了flutter 弗拉特 的东西,绝的这个东西绝对是比ReactNative更高一层次的,在2018年12月5好,flutter的第一个stale1.0发布了,我们在GitHub上可以 ...

  5. Android .9.png 的介绍

    概述 .9.PNG是安卓开发里面的一种特殊的图片,这种格式的图片通过ADT自带的编辑工具生成,使用九宫格切分的方法.点九图是一种可拉伸的位图,android会自动调整它的大小,来使图像在充当背景时可以 ...

  6. 在angular 6中使用 less

    在angular 6中使用 less 新项目 ng new [appname] --style less 已有的项目 修改 *.css 文件及引用处后缀名为 less并在 angular.json 文 ...

  7. adb部署及使用

    一 掌握adb部署&使用方法及常用命令 1.何为adb? sdk软件开发套件software development kit apk是安卓应用安装包 adb是android sdk的一个工具, ...

  8. Unity2018 Open C# Project Error

    错误日志 升级到Unity2018之后,使用 Open C# Project 打开VS工程,出现报错,无法启动VS. 错误日志如下: ArgumentException: Value does not ...

  9. C语言运行库翻译

    这是从Visual C++ 6里面的C语言部分翻译过来. http://files.cnblogs.com/files/sishenzaixian/C运行库.zip

  10. python selenium2 中的显示等待WebDriverWait与条件判断expected_conditions举例

    #coding=utf-8from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium. ...