uni-app+workman之如何使用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>