WebSocket协议

用这个协议最方便的就是，服务器主动向客户端推送信息。客户端也可以主动向服务器发送信在普通的连接过程中，HTTP通过Request请求来界定，一个Request得到一个Response，在HTTP1.0中，这次HTTP请求就已经结束了。

息。属于应用层协议，在握手阶段还是使用了HTTP的协议。

在 HTTP1.1 中进行了改进，使得有一个 keep-alive，也就是说，在一个 HTTP 连接中，可以发送多个 Request，接收多个 Response。但是请记住 Request = Response， 在 HTTP 中永远是这样，也就是说一个 Request 只能有一个 Response。而且这个 Response 也是被动的，不能主动发起。

可以看到这两种方式都体现出了HTTP协议的被动性，也就是说服务端不能主动联系客户端，只能有客户端发起。而Websocket就解决了这个问题，当服务器完成协议升级后（HTTP->Websocket），服务端就可以主动推送信息给客户端了。

1、安装Websocket

通过命令：

pip install flask-socketio
pip install websocket-gevent

（第二条这条命令部分机子是需要的，有些环境不需要，具体原因不大清楚，笔者在进行项目时需要安装这两个，按道理第一个就够了。）

安装flask_socketio模块实现了Flask对websocket的封装，从而允许建立在flask上的应用的服务端和客户端建立全双工通信。

2、启动socketio的方式

原flask下是通过 app.run启动的，现在需要进一步封装flask。通过如下代码进行启动项目：

socketio.run(app, debug=True,host='127.0.0.1',port=5000)

3、服务端推送消息函数

send函数

send函数用于推送无名事件，代码如下：

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

emit函数

@socketio.on('connect',namespace='/test_conn')
def handle_my_custom_event(json):
      emit('my response', data=json, namespace='/test_conn')

在上面的函数中，@socketio.on(‘connect’, namespace=’/test_conn’)中的connect是socketio的内置事件。

当客户端和服务端连接之后，前端和后端都会收到一个名为connet的事件，服务端接收到这个事件之后就会执行def函数里面的内容，然后就可以使用emit或者send函数推送消息给前端了。

namespace可以标志多个事件，官方文档的解释是：“当一个客户端连接服务器的不同命名域的时候，可以在同一个socket连接里完成”。

一个namespace定义了一个后端的websocket连接接口，客户端和服务器通过三次握手建立socket连接后，连接不同的服务器接口，socket连接并不会断开。而一个后端接口可以接受多个客户端的socket连接，如果在后端的emit中定义‘broadcast=True’，那么所有连接到这个命名域的客户端都会收到这个消息。不同命名域之间可以通过发送消息指定命名域的方式来相互通信。

emit函数中，第一个参数’server_response’是服务端发送这个消息的事件名，在客户端要建立一个接受这个事件的函数处理，后面的字典就是消息内容，namespace=’/test_conn’表示这个消息发送到信道（test_conn）中。

4、使用线程来进行while循环推送消息

在理论上需要定时推送消息的时候，大部分是使用while循环实现的，但是实际上这样容易影响服务端死循环，导致连接出现错误，代码如下：

正确的代码应该是建立一个后端线程，通过后台线程执行while的循环从而解决该问题。

5、客户端代码

function onload() {
    $(document).ready(function() {
        namespace='/test_conn'
        var socket = io.connect('ws://127.0.0.1:11000/test_conn');
        //或者使用 var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
        socket.on('server_response', function(res) {
            var msg = res.data;
            console.log(msg);
        }); 
    });
    使用io.connect建立指定namespace的socket连接了，使用socket.on监听并捕捉服务端发来的消息，并操作前端界面进行相应改变。
}