小程序使用WebSocket连接Flask后端

介绍

服务端实现

方法1：使用Flask-SocketIO

要在小程序中连接 Flask WebSocket，您需要按照以下步骤进行配置：

1. 在 Flask 中安装 Flask-SocketIO 扩展。您可以使用以下命令进行安装：

	pip install flask-socketio

2. 在 Flask 应用程序中导入 SocketIO：

	from flask_socketio import SocketIO

3. 初始化 SocketIO：

   app = Flask(__name__)
   socketio = SocketIO(app)

4. 创建一个 WebSocket 事件处理程序：

	@socketio.on('connect')
	def test_connect():
	    print('Client connected')
	@socketio.on('disconnect', namespace=name_space)
	def disconnect_msg():
	   print('client disconnected.')
	@socketio.on('my_event', namespace=name_space)
	def mtest_message(message):
	    print(message)
	    emit('my_response',
	         {'data': message['data'], 'count': 1})

方法2：Flask-Sockets实现☆☆☆（前身是flask-sockets）

Flask-Sock
Flask-Sockets

1. 在 Flask 中安装 Flask-SocketIO 扩展。您可以使用以下命令进行安装：

	pip install flask-sock

2. 创建一个 WebSocket 事件处理程序：

from flask import Flask
from flask_sock import Sock, Server

app = Flask(__name__)
sock = Sock(app)
        
@app.route('/')
def hello():
    return 'Hello World!'

@sock.route('/connect')
def connect(ws: Server):
    print('检测到客户端连接....')
    while True:
        data = ws.receive()
        print(data)
        ws.send(data)
 
if __name__ == "__main__":
    app.run(debug=True, port=5000)

3. 使用Postman测试连接：
   

前端实现

方法1：微信原生框架中实现

1. 在小程序中使用 wx.connectSocket 方法连接 WebSocket：

wx.connectSocket({
  // 当使用Flask-SocketIO时需要加上'/socket.io/?EIO=4&transport=websocket'，否则直接使用ws://localhost:5000
  url: 'ws://localhost:5000/socket.io/?EIO=4&transport=websocket', 
  success: function(res) {
    console.log('WebSocket connected')
  }
})

在上面的代码中，url 参数应该是您 Flask 应用程序的地址和端口号。

2. 在小程序中监听 WebSocket 事件：

wx.onSocketOpen(function(res) {
  console.log('WebSocket connection opened')
})

wx.onSocketMessage(function(res) {
  console.log('Received WebSocket message: ' + res.data)
})

wx.onSocketError(function(res) {
  console.log('WebSocket error: ' + res.errMsg)
})

wx.onSocketClose(function(res) {
  console.log('WebSocket connection closed')
})

在上面的代码中，您可以根据需要添加其他事件处理程序。

方法2：uni-app框架中实现

var socketTask = uni.connectSocket({
	// 当使用Flask-SocketIO时需要加上'/socket.io/?EIO=4&transport=websocket'，否则直接使用ws://localhost:5000
	url: 'ws://localhost:5000/socket.io/?EIO=4&transport=websocket', 
	success: () => {
		console.log('success')
	},
	fail: () => {
		console.log('fail')
	},
	complete: () => {}
});

console.log(socketTask);

socketTask.onOpen((res) => {
	console.log('onOpen');
	console.log(res);
});
socketTask.onClose((res) => {
	console.log('onClose');
	console.log(res);
});
socketTask.onMessage((res) => {
	console.log('onMessage');
	console.log(res);
});