sanic 使用websocket与前端vue通信，持续发送信息

前记

由于sanic使用较少，很难获取到有效信息，而且对websocket也是挺“一窍不通”的，因此写一下总结。在使用过程中，对sanic注册websocket，还是使用socketio不清。前端vue是使用io，还是WebSocket还是VueSocketIO。

直接使用sanic.add_websocket_route方法和使用python-socketio库的区别：

API：sanic.add_websocket_route是Sanic框架自带的一个方法，用于添加WebSocket路由。它基于WebSocket协议进行通信，并且提供了一些基本的事件回调函数。而python-socketio库是一个独立的Python库，提供了更多高级功能和选项，如房间管理、命名空间、广播等。

功能：sanic.add_websocket_route提供了基本的WebSocket功能，允许客户端与服务器进行双向实时通信。但它没有提供一些高级功能，如广播、房间管理等。python-socketio则提供了更多高级功能，使得开发者可以更方便地构建实时应用程序。

兼容性：sanic.add_websocket_route只支持原生WebSocket协议。而python-socketio库支持Socket.IO协议（包括WebSocket和轮询两种传输方式），并且可以与其他Socket.IO客户端库（如JavaScript版的Socket.IO）进行兼容。

总结来说，如果只需要简单的双向实时通信，则可以使用sanic.add_websocket_route方法；如果需要更多高级功能，并且希望与其他Socket.IO客户端库兼容，则可以考虑使用python-socketio库。

sanic自带的websocket连接

• 当使用sanic.add_websocket_route方法建立了WebSocket路由后，前端vue可以通过WebSocket API与其建立连接。
• 官方提供了一种注册websocket的方式，如下所示：

from sanic import Sanic
from sanic.response import json
from sanic.websocket import WebSocketProtocol

app = Sanic("websocket_example")

@app.websocket('/feed')
async def feed(request, ws):
    while True:
        data = 'hello!'
        print('Sending: ' + data)
        await ws.send(data)
        data = await ws.recv()
        print('Received: ' + data)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8000, protocol=WebSocketProtocol)

• 也可以使用app.add_websocket_route()进行注册。

async def feed(request, ws):
    pass

app.add_websocket_route(feed, '/feed')

• 但由于前端vue部分错误使用了io建立连接，导致失败。
• 在网上搜到了以下代码作为demo，在控制台输入进行测试，发现可以连通，但是连接一次就关闭了。说明该方法是可以实现websocket连接的。

var ws = new WebSocket("ws://ip:port/ws/");
ws.onopen = function(evt) {
	console.log("Connection open ...");
	ws.send("Hello WebSockets!");
};
 
ws.onmessage = function(evt) {
	console.log("Received Message: " + evt.data);
	ws.close();
};
 
ws.onclose = function(e) {
	console.log("Connection closed.");
    console.log(e.code + ' ' + e.reason + ' ' + e.wasClean);
}

后端使用python-socketio

• 由于之前使用过socketio，想在sanic中也进行使用。
• 首先需要安装python-socketio
• 可以通过API获取socketio.Client、socketio.AsyncServer具体参数的含义。
• demo可进入网页示例。

pip install python-socketio

• 以下代码结合demo及sanic框架。

from sanic import Sanic
import socketio

app = Sanic(__name__)
sio = socketio.AsyncServer(async_mode='sanic', cors_allowed_origins='*',)
sio.attach(app , socketio_path="/ws")
@sio.on("connect")
async def connect(sid, environ):
    print("connect ", sid)
	await sio.emit("message", "connecting")

# 以下为文档示例demo部分
async def index(request):
    """Serve the client-side application."""
    with open('index.html') as f:
        return web.Response(text=f.read(), content_type='text/html')

@sio.event
def connect(sid, environ):
    print("connect ", sid)

@sio.event
async def chat_message(sid, data):
    print("message ", data)

@sio.event
def disconnect(sid):
    print('disconnect ', sid)

app.router.add_static('/static', 'static')
app.router.add_get('/', index)

前端使用io建立连接

connectWebsocket: function (sessionId = null) {
  var wsURL = 'http://'+'window.location.host:'+'port' //该为示例，需自己修改port
  this.websocket = io(wsURL, {
    path: "/ws",
    transports: ['websocket'],
    query: {sessionId: "xxx"},
  })
  this.websocket.on('message', this.receiveWebsocketMessage)  // 从sio.emit("message", xxx)接受到的message的会展示
},
receiveWebsocketMessage: function (msg) {
    console.log("websocket message", msg)
},

前端使用websocket接收

• 以下代码来自chat，真假未验证，可参照sanic 部分的前端代码。

javascript
// 在vue组件中使用WebSocket连接
export default {
  data() {
    return {
      socket: null,
    }
  },
  mounted() {
    // 创建WebSocket连接
    this.socket = new WebSocket('ws://localhost:8000/ws');
    
    // 监听连接建立事件
    this.socket.onopen = () => {
      console.log('WebSocket连接已建立');
      
      // 发送消息到服务器
      this.socket.send('Hello, server!');
    };
    
    // 监听收到消息事件
    this.socket.onmessage = (event) => {
      console.log('收到消息:', event.data);
      
      // 处理收到的消息
      // ...
    };
    
    // 监听连接关闭事件
    this.socket.onclose = () => {
      console.log('WebSocket连接已关闭');
      
      // 清理工作，如重新连接等
      // ...
    };
  },
}

前端使用VueSocketIO

import VueSocketIO from 'vue-socket.io';

Vue.use(new VueSocketIO({
  connection: 'http://localhost:3000'
}));

• 可参考网址，写的注释太多了，漏掉了path及transports等是在options里面的。

引用

sanic文档
python实现Socket.IO
websocketio-API Reference
socketio-client demo
Vue中 引入使用 vue-socket.io