初尝WebSocket

作者: c4a1d989518e | 来源:发表于2018-05-03 21:55 被阅读138次

初尝WebSocket
初尝
初尝
初尝
初尝
毕业这年
WebSocket初认识
初尝摄影
初尝生活
初尝催眠

为什么要用WebSocket，因为我要让服务器主动发消息给客户端。最容易想象一个应用场景就是实时日志的查看。

我的项目前端用的是Vue，后端用的是Python。后端的框架是Flask，所以我选择的是flask_socketio这个包，要说的一点是，Websocket是一个通信协议，flask_socketio这是要利用Websocket协议的包。就像是requests这个包是根据的http协议。

直接看我服务端python用的代码:

#!/usr/bin/env python
from flask import Flask, render_template, session, request,jsonify
from flask_socketio import SocketIO, emit
import time
import requests

app = Flask(__name__, template_folder='./')
app.config['SECRET_KEY'] = 'secret!'

socketio = SocketIO(app)


@app.route('/hh',methods=['POST'])
def test_msg():
    a=str(request.data,encoding="utf-8")
    socketio.emit('tv_response', {'data': a})
    return "hello"



if __name__ == '__main__':
    socketio.run(app, host='0.0.0.0',port='5001')

前端的代码是

<script>
    import VueSocketio from 'vue-socket.io';
    import io from 'socket.io-client';
    import Vue from 'vue'

    // Vue.use(VueSocketio, socketio('http://0.0.0.0:5001'))

    var MyLogs = [];
    
    

    export default{
        data() {
            return {
                AllLogs:[{'sdf':'dfjd'}],
                MyLogs:MyLogs,

            }
        
        },
       
    };
    var socket = io.connect('http://localhost:5001/');
    socket.on('connect',function(){
        console.log("socket已连接")
        //连接成功
    });
    socket.on('tv_response',function(msg){
        //这里实现了数据绑定，数据实时更新的效果，将MyLogs声明在了外卖
        
        MyLogs.push(msg.data)
        console.log(MyLogs)
        
    });
</script>

我在使用后端的socketio的时候，实际上是把它当做了一个端口为5001的服务器，我另一个端口5000的服务在进行一个轮询的产生日志的操作，每一次循环，就通过post请求发送到5001端口，然后通过Websocket发送到前端。