uni-app框架之如何使用Websocket

uni-app框架websocket测试发现：【APP端无法同时开多个websocket----这个问题等待解决！！！H5端没问题】

测试发现问题所在：uni.connectSocket(OBJECT)创建出来的对象 socketTask 在浏览器中是一个实例对象【支持同时创建多个实例】而在APP却是一个单实例【所有新建的url的websocket都指向最后一个创建的实例】

总的来说，还是可以使用，在APP中尽可能把数据一起打包发过来【只开通一个websocket,一个用户在同一个页面下开通一个websocket也够用了，毕竟大部分情况还是http请求】

 

关于uni-app框架框架的websocket，测试了好几天，终于搞定了！刚开始总是怀疑是不是uni-app提供的结果有问题，在测试过程中遇到了一些常见的问题：

A：使用uni.connectSocket(OBJECT)创建连接，在回调函数success中也console.log("连接成功")正常输出！【服务器配置问题】

B：浏览器正常，而app访问却不正常【务必确保你的url不是本地ws://127.0.0.1:9099,否则手机端肯定无法访问】

C：同步创建多个websocket访问不了【肯定是你的websocket服务器端配置有问题】

-----------------------------------各种问题，答案只要一个：服务器可能出问题了,uni-app框架无任何问题-------------------------

【测试特别容易犯的错误】一定要注意：如果在手机APP测试，千万别用ws://127.0.0.1:8099本地测试地址，你永远都无法连接成功 【手机APP端必须使用服务器ws地址】

服务器端：我用的是python-flask作为服务器，uni-app框架只能使用Flask-Sockets库【Flask-SocketIO不支持，原因参考：https://blog.csdn.net/weixin_43343144/article/details/92801617】

服务器端和客户端的测试：可以使用这个网站提供的客户端和服务器端来测试：http://www.blue-zero.com/WebSocket/ 【这个网站测试的连接格式为 ws://IP或域名:端口（示例ws://121.40.165.18:8800）】

特别提醒：uni-app框架不支持JavaScript原生的Websocket，也不兼容JavaScript-socket.io库

最后切记：测试客户端，必须确保服务器端没问题，反之亦然！【否则各种bug你无法知道到底是哪里的原因，很无语】

本人提供一个完整的案例【Flask-Sockets服务端，uni-app的websocket客户端】

 

【Flask-Sockets服务端代码】
————————————————
 

from flask import Flask
from flask_sockets import Sockets
 
 
app = Flask(__name__)
sockets = Sockets(app)
 
 
@sockets.route('/echo')
def echo_socket(ws):
    while not ws.closed:
        服务器端没关闭之前必须有接收阻塞，否则服务器和客户端都会死循环而崩溃
        websocket的原理：客户端发送消息请求,服务器端回复数据【客户端不发消息,循环不会阻塞就是死循环】
        message = ws.receive()
        print("监听成功")
        ws.send(message)
 
 
@app.route('/')
def hello():
    return 'Hello World!'
 
 
if __name__ == "__main__":
    from gevent import pywsgi
    from geventwebsocket.handler import WebSocketHandler
    server = pywsgi.WSGIServer(('0.0.0.0', 9099), app, handler_class=WebSocketHandler)
    server.serve_forever()

【uni-app框架的websocket代码】 

<template>
	<view class="websockets">
		<button type="primary" @tap="clickRequest">点击发送请求</button>
		<button type="primary" @tap="leave">离开页面</button>
	</view>
</template>
 
<script>
	export default {
		onLoad() {
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			this.connectSocketInit();
		},
		data() {
			return {
				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false
			}
		},
		// 关闭websocket【必须在实例销毁之前关闭,否则会是underfined错误】
		beforeDestroy() {
			this.closeSocket();
		},
		methods: {
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			connectSocketInit() {
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: "ws://119.28.180.110:9099/echo",
					success(data) {
						console.log("websocket连接成功");
					},
				});
 
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					this.socketTask.send({
						data: "uni-app发送一条消息",
						async success() {
							console.log("消息发送成功");
						},
					});
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						console.log("收到服务器内容：" + res.data);
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
				})
			},
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				this.socketTask.close({
					success(res) {
						this.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},
			clickRequest() {
				if (this.is_open_socket) {
					// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
					this.socketTask.send({
						data: "请求一次发送一次message",
						async success() {
							console.log("消息发送成功");
						},
					});
				}
			},
			leave() {
				this.$uniReLaunch("/pages/tabbar/wallet/wallet")
			}
		}
	}
</script>