【重磅技术】uni-app框架之如何使用Websocket【官方自带的uni.connectSocket完美测试成功】【测试发现：APP端无法同时开多个websocket】

水深无声 2021-09-20 07:30 1204阅读 0赞

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

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

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

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

A：使用[uni.connectSocket(OBJECT)][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][https_blog.csdn.net_weixin_43343144_article_details_92801617]】

**服务器端和客户端的测试：**可以使用这个网站提供的客户端和服务器端来测试：[http://www.blue-zero.com/WebSocket/][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>

[uni.connectSocket_OBJECT]: https://uniapp.dcloud.io/api/request/websocket?id=connectsocket
[socketTask]: https://uniapp.dcloud.io/api/request/socket-task
[https_blog.csdn.net_weixin_43343144_article_details_92801617]: https://blog.csdn.net/weixin_43343144/article/details/92801617
[http_www.blue-zero.com_WebSocket]: http://www.blue-zero.com/WebSocket/