前记
由于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库。文章来源：https://www.toymoban.com/news/detail-514680.html
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文章来源地址https://www.toymoban.com/news/detail-514680.html
到了这里，关于sanic 使用websocket与前端vue通信，持续发送信息的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
