vue+koa+python websocket通信

深藏阁楼爱情的钟 2022-11-28 13:45 150阅读 0赞

### 文章目录 ###

*   *   *  一、python websocket
         *  二、vue websocket
         *  三、koa websocket

> 需求: python制作的工具拿到语音识别结果,发送给koa后端，然后在vue前端显示出来,由于要实时显示，所以需要进行vue+koa+python websocket通信

![在这里插入图片描述][20200818095116736.gif_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDUzMjY2_size_16_color_FFFFFF_t_70_pic_center]  
很明显python，vue都是websocket客户端，koa作为websocket服务器端。

### 一、python websocket ###

只用将websocket发送给服务器

1.安装websocket

pip install websocket-client

2.与服务器建立websocket连接，发送消息

# 是否在控制台打印连接和消息发送接受情况
    websocket.enableTrace(False)      
    # 与服务器端建立的websocket连接
    # url上传递中文参数要进行编码,通过会议室名区分不同的连接
    url = SERVER_WS_URL + "?name=" + urllib.parse.quote(self.combo.currentText())
    self.websocket_server = websocket.WebSocketApp(url,on_open=server_on_open,on_message=server_on_message,on_close=server_on_close)
    # 开启长连接
    _thread.start_new_thread(self.websocket_server.run_forever, ())
    # 将消息发送服务器端
    main.websocket_server.send(ws.finalResult)
    
    def server_on_open(ws):
        pass
    
    
    def server_on_message(ws, message):
        pass
    
    
    def server_on_close(ws):
        pass

### 二、vue websocket ###

vue中使用websocket不用额外安装websocket的包，因为HTML5中已经有了websocket API，所以也可以说是HTML5 webscoket

只用接受服务器发送的websocket信息

//WebSocket连接地址
    const websocketUrl = 'ws://172.25.78.33:3000/ws'
    
    export function getWebSocket(name) { 
        console.log(websocketUrl + "?name=" + name)
        return new WebSocket(websocketUrl + "?name=" + name)
    }
    
    socket = getWebSocket(this.room.name);
                socket.onopen = function () { };
                socket.onmessage = function (msg) { 
                  const result = JSON.parse(msg.data);
                  if (result.data != null) { 
                    //onmessage 
                  } else { 
                    //open or close
                  }
                };
                socket.onclose = function () { };
                socket.onerror = function () { };

### 三、koa websocket ###

服务器既要接收来自python客户端的信息又要将它发送给vue

1.  安装websocket

npm install koa-websocket

const websockify = require('koa-websocket');
    
    let rooms = { 
      'TV会议室1': [],
      'TV会议室2': [],
      'TV会议室3': [],
      '西区会议室1': [],
      '西区会议室2': [],
      '西区会议室3': [],
      '东区会议室': [],
      '西区培训室': [],
      '东区培训室': []
    }
    //等同于websocket onOpen
    app.ws.use(function (ctx, next) { 
      //通过push ctx区分不同的会议室
      rooms[ctx.query.name].push(ctx)
      return next(ctx)
    })
    
    app.ws.use(route.all('/ws', (ctx) => { 
      ctx.websocket.on('message', function (result) { 
      })
      ctx.websocket.on('close', function () { 
      })
    }));

[20200818095116736.gif_pic_center]: /images/20221124/fe17a029cb3846128b5f9456a2031d56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDUzMjY2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/5186246bc3ac45c78ea2608a322ffe60.png