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>