vue+koa+python websocket通信
文章目录需求: python制作的工具拿到语音识别结果,发送给koa后端,然后在vue前端显示出来,由于要实时显示,所以需要进行vue+koa+python websocket通信
·
需求: python制作的工具拿到语音识别结果,发送给koa后端,然后在vue前端显示出来,由于要实时显示,所以需要进行vue+koa+python websocket通信
很明显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
- 安装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 () {
})
}));
更多推荐
已为社区贡献1条内容
所有评论(0)