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客戶端】
```javascript
【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()
```
```javascript
【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>
```
