flask_socketio的使用

websocket协议

为什么需要 WebSocket ？

了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。

这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步 JavaScript 和 XML（AJAX）请求实现长轮询。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

同时为了方便使用，HTML5提供了非常简单的操作就可以让前端开发者直接实现websocket通信，开发者只需要在支持WebSocket的浏览器中，创建webSocket对象之后，通过onopen、onmessage、onclose、onerror四个事件的实现即可处理webSocket的请求响应。

注意：websocket是HTML5技术的一部分，但是websocket并非只能在浏览器或者HTML文档中才能使用，事实上在python或者C++等语言中只要能实现websocket协议报文，均可使用。

导读：https://blog.csdn.net/zhusongziye/article/details/80316127

客户端报文:

GET /mofang/websocket HTTP/1.1
Host: 127.0.0.1
Origin: http://127.0.0.1:5000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==      # Sec-WebSocket-Key 是基于SHA-1随机生成的
Sec-WebSocket-Version: 13

服务端报文:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= # 结合客户端提供的Sec-WebSocket-Key基于固定算法计算出来的
Sec-WebSocket-Protocol: chat

websocket与socket的关系

他们两的关系就像Java和JavaScript，并非完全没有关系，只能说有点渊源。

Socket严格来说，其实并不是一个协议，而是为了方便开发者使用TCP或UDP协议而对TCP/IP协议进行封装出来的一组接口，是位于应用层和传输控制层之间的接口。通过Socket接口，我们可以更简单，更方便的使用TCP或UDP通信。

WebSocket是实现了浏览器与服务器的全双工通信协议，一个模拟Socket的新型应用层协议。

方案比较

ajax轮询:

ajax轮询的原理很简单,就是让浏览器隔几秒就向服务器发送请求看有没有新的消息

long poll

原理和ajax轮询差不多,不过采用的是阻塞模式(一直打电话,接不到就不挂电话),也就是说,客户端发起再次建立连接.如果没消息,就一直不返回response给客户端,直到有消息才返回.

开始使用flask-socketio

在python中实现socket服务端的方式有非常多，一种最常用的有python-socketio，而我们现在使用的flask框架也有一个基于python-socket模块进行了封装的flask-socketio模块.

官方文档：https://flask-socketio.readthedocs.io/en/latest/

博客参考: https://zhuanlan.zhihu.com/p/94875211

注意:

因为目前还有会存在一小部分的设备或者应用是不支持websocket的.所以为了保证功能的可用性,我们使用socktio模块,但是由此带来了2个问题,必须要注意的:

python服务端使用基于socketio进行通信服务,则另一端必须也是基于socketio来进行对接通信,否则无法进行通信

socketio在使用上还有一个版本对应的问题, 版本不对应则无法通信.回报版本错误.

如果使用了javascript版本socketio 1.x或者2.x版本,则python-socketio或者flask-socketio的版本必须是4.x

如果使用了javascript版本socketio 3.x版本, 则python-socketio或者flask-socketio的版本必须是5.x.

版本对照表

终端下执行命令，安装：

pip install flask-socketio
pip install -U flask-cors # 解决可能出现的跨域问题

存在的问题:

我们的程序要以异步的方式执行,这里可能会出现异常

我们可以使用eventlet(协程模块)或(gevent)进行打补丁

# 方案1
pip install eventlet  # 协程模块
# 方案2
# pip install gevent
# pip install gevent-websocket

 # 协程模块(在项目中使用,让项目后点引入的涉及通信的模块都以协程的方式运行)
# 简单使用
import enventlet
eventlet.monkey_patch()  # 打补丁

# 方式二
import gevent
from gevetn import monkey()
monkey.patch_all()

简单使用

import eventlet
eventlet.monkey_patch()

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

if __name__ == '__main__':
    socketio.run(app, host='0.0.0.0', debug=True)

以上代码即完成了一个简单的 Web 服务器。

socketio.run()函数封装了 Web 服务器的启动，并替换了app.run()标准的 Flask 开发服务器启动。

当应用程序处于调试模式时，Werkzeug 开发服务器仍然在内部使用和配置正确socketio.run()。

在生产模式中，如果可用，则使用 eventlet Web 服务器，否则使用 gevent Web 服务器。如果未安装 eventlet 和gevent，则使用 Werkzeug 开发 Web 服务器。

连接事件

Flask_SocketIO调度连接和断开事件. 以下示例显示如何为它们注册处理程序：

@socketio.on('connect', namespace='/test')
def test_connect():
	emit('my response',{'data': 'Connected'})
@socketio.on('disconnect', namespace='/test')
def test_disconnect():
    print('Client disconnect')

连接事件处理程序可以选择返回False以拒绝连接。这样就可以在此时对客户端进行身份验证。

请注意，连接和断开连接事件将在使用的每个命名空间上单独发送。

接收消息

使用 SocketIO 时，双方都会将消息作为事件接收。在客户端使用 Javascript 回调。使用 Flask-SocketIO，服务器需要为这些事件注册处理程序，类似于视图函数处理路由的方式。

以下示例为未命名的事件创建服务器端事件处理程序：

@socketio.on('message')
def handle_message(message):
    print('received message:' + message)

上面的示例使用字符串消息。另一种类型的未命名事件使用 JSON 数据：

@socketio.on('json')
def handle_json(json):
    print('received json: ' + str(json))

最灵活的方式是使用自定义事件名称，在开发过程中最常用的也是这种方式。

事件的消息数据可以是字符串，字节，整数或 JSON：

@socketio.on('my event')
def handle_my_custom_event(json):
    print('received json: ' + str(json))

自定义命名事件也可以支持多个参数：

@socketio.on('my event')
def handle_my_custom_event(arg1, arg2, arg3):
    print('received args: ' + arg1 + arg2 + arg3)

Flask-SocketIO 支持 SocketIO 命名空间，允许客户端在同一物理套接字上复用多个独立连接：

@socketio.on('my event', namespace='/test')
def handle_my_custom_namespace_event(json):
    print('received json: ' + str(json))

如果未指定名称空间，'/'则使用具有名称的默认全局名称空间。

对于装饰器语法不方便的情况，on_event可以使用该方法：

def my_function_handler(data):
    pass

socketio.on_event('my event', my_function_handler, namespace='/test')

客户端可以请求确认回叫，确认收到他们发送的消息。处理函数返回的任何值都将作为回调函数中的参数传递给客户端：

@socketio.on('my event')
def handle_my_custom_event(json):
    print('received json: ' + str(json))
    return 'one', 2

在上面的示例中，将使用两个参数调用客户端回调函数，'one'和2。如果处理程序函数未返回任何值，则将调用客户端回调函数而不带参数。

发送消息

如上一节所示定义的 SocketIO 事件处理程序可以使用send()和emit() 函数将回复消息发送到连接的客户端。

以下示例将收到的事件退回给发送它们的客户端：

from flask_socketio import send, emit

@socketio.on('message')
def handle_message(message):
    send(message)

@socketio.on('json')
def handle_json(json):
    send(json, json=True)

@socketio.on('my event')
def handle_my_custom_event(json):
    emit('my response', json)

注意如何send()和emit()分别用于无名和命名事件。

当有命名空间的工作，send()并emit()默认使用传入消息的命名空间。可以使用可选namespace参数指定不同的命名空间：

@socketio.on('message')
def handle_message(message):
    send(message, namespace='/chat')

@socketio.on('my event')
def handle_my_custom_event(json):
    emit('my response', json, namespace='/chat')

要发送具有多个参数的事件，请发送元组：

@socketio.on('my event')
def handle_my_custom_event(json):
    emit('my response', ('foo', 'bar', json), namespace='/chat')

SocketIO 支持确认回调，确认客户端收到了一条消息：

def ack():
    print 'message was received!'

@socketio.on('my event')
def handle_my_custom_event(json):
    emit('my response', json, callback=ack)

使用回调时，Javascript 客户端会收到一个回调函数，以便在收到消息时调用。客户端应用程序调用回调函数后，服务器将调用相应的服务器端回调。如果使用参数调用客户端回调，则这些回调也作为服务器端回调的参数提供。

广播

SocketIO 的另一个非常有用的功能是广播消息。SocketIO 支持通过此功能broadcast=True可选参数send()和emit()：

@socketio.on('my event')
def handle_my_custom_event(data):
    emit('my response', data, broadcast=True)

在启用广播选项的情况下发送消息时，连接到命名空间的所有客户端都会接收它，包括发件人。如果未使用名称空间，则连接到全局名称空间的客户端将收到该消息。请注意，不会为广播消息调用回调。

在此处显示的所有示例中，服务器响应客户端发送的事件。但对于某些应用程序，服务器需要是消息的发起者。这对于向客户端发送通知在服务器中的事件（例如在后台线程中）非常有用。socketio.send()和socketio.emit()方法可用于广播到所有连接的客户端：

def some_function():
    socketio.emit('some event', {'data': 42})

请注意，socketio.send()与socketio.emit()在上下文理解上和send()与emit()功能不同。另请注意，在上面的用法中没有客户端上下文，因此broadcast=True是默认的，不需要指定。

房间

对于许多应用程序，有必要将用户分组为可以一起寻址的子集。最好的例子是具有多个房间的聊天应用程序，其中用户从他们所在的房间接收消息，而不是从其他用户所在的其他房间接收消息。SocketIO 支持通过房间的概念join_room()和leave_room()功能：

from flask_socketio import join_room, leave_room

@socketio.on('join')
def on_join(data):
    username = data['username']
    room = data['room']
    join_room(room)
    send(username + ' has entered the room.', room=room)

@socketio.on('leave')
def on_leave(data):
    username = data['username']
    room = data['room']
    leave_room(room)
    send(username + ' has left the room.', room=room)

在send()和emit()函数接受一个可选room导致被发送到所有的都在定房客户端的消息的说法。

所有客户端在连接时都会被分配一个房间，以连接的会话ID命名，可以从中获取request.sid。给定的客户可以加入任何房间，可以给出任何名称。当客户端断开连接时，它将从其所在的所有房间中删除。无上下文socketio.send() 和socketio.emit()函数也接受一个room参数，以广播给房间中的所有客户端。

由于为所有客户端分配了个人房间，为了向单个客户端发送消息，客户端的会话 ID 可以用作房间参数。

错误处理

Flask-SocketIO还可以处理异常：

@socketio.on_error()        # Handles the default namespace
def error_handler(e):
    pass

@socketio.on_error('/chat') # handles the '/chat' namespace
def error_handler_chat(e):
    pass

@socketio.on_error_default  # handles all namespaces without an explicit error handler
def default_error_handler(e):
    pass

错误处理函数将异常对象作为参数。

还可以使用request.event变量检查当前请求的消息和数据参数，这对于事件处理程序外部的错误记录和调试很有用：

from flask import request

@socketio.on("my error event")
def on_my_event(data):
    raise RuntimeError()

@socketio.on_error_default
def default_error_handler(e):
    print(request.event["message"]) # "my error event"
    print(request.event["args"])    # (data,)

基于类的命名空间

作为上述基于装饰器的事件处理程序的替代，属于命名空间的事件处理程序可以创建为类的方法。flask_socketio.Namespace作为基类提供，用于创建基于类的命名空间：

from flask_socketio import Namespace, emit

class MyCustomNamespace(Namespace):
    def on_connect(self):
        pass

    def on_disconnect(self):
        pass

    def on_my_event(self, data):
        emit('my_response', data)

socketio.on_namespace(MyCustomNamespace('/test'))

使用基于类的命名空间时，服务器接收的任何事件都将调度到名为带有on_前缀的事件名称的方法。例如，事件my_event将由名为的方法处理on_my_event。如果收到的事件没有在命名空间类中定义的相应方法，则忽略该事件。基于类的命名空间中使用的所有事件名称必须使用方法名称中合法的字符。

为了方便在基于类的命名空间中定义的方法，命名空间实例包括类中的几个方法的版本，flask_socketio.SocketIO当namespace没有给出参数时，这些方法默认为正确的命名空间。

如果事件在基于类的命名空间中具有处理程序，并且还有基于装饰器的函数处理程序，则仅调用修饰的函数处理程序。

测试

以上是作为官网文档的翻译，下面来说说写完了代码之后，应该怎么来调试。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
    var socket = io.connect('http://' + document.domain + ':' + location.port);
    socket.on('connect', function() {
        socket.emit('my event', {data: 'I\'m connected!'});
    });
</script>

使用 JavaScript 来连接服务端，这里说一个我遇到的问题，最开始使用的是 jsbin 来测试，但怎么都连不到后端，原因就是 jsbin 是 HTTPS 的，而我的请求是 HTTP，于是还是老老实实写了一个 HTML 文件，源码可以直接在 Github 下载。

<!DOCTYPE HTML>
<html>
<head>
    <title>Flask-SocketIO Test</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            namespace = '/test';
            var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);

            socket.on('connect', function() {
                socket.emit('my_event', {data: 'I\'m connected!'});
            });
            
            socket.on('my_response', function(msg) {
                $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());
            });

            $('form#emit').submit(function(event) {
                socket.emit('my_event', {data: $('#emit_data').val()});
                return false;
            });
        });
    </script>
</head>
<body>
    <h1>Flask-SocketIO Test</h1>
    <p>Async mode is: <b>{{ async_mode }}</b></p>
    <h2>Send:</h2>
    <form id="emit" method="POST" action='#'>
        <input type="text" name="emit_data" id="emit_data" placeholder="Message">
        <input type="submit" value="Echo">
    </form>
    <h2>Receive:</h2>
    <div id="log"></div>
</body>
</html>

有了这个页面之后，就可以直接在浏览器中输入 http://127.0.0.1:5000 访问服务端了，更多功能可以随意折腾。

GRLend