前言

• 最近在uni-app+vue3+websocket實現聊天功能，在使用websocket還是遇到很多問題

• 這次因為是app手機應用，就沒有使用websocket對象，使用的是uni-app的uni.connectSocket

• 為了方便測試這次用的是node.js一個簡單的dom，來聯調模擬發數據，過程有意思

首先模擬一個node.js服務來測試-代碼實現

1.在桌面建立一個空文件夾-命名英文

2.打開cmd

3.初始化-下包

// 初始化包
npm init -y
?
// 下載node框架包
npm i express --save
?
// 下載websocket模塊
npm i ws

4.回到項目根文件創建根文件-app.js-代碼如下

// 引入express框架
var app = require('express')();
var server = require('http').Server(app);
?
// 引入ws框架支持webSocket實現
var WebSocket = require('ws');
?
// 針對8080接口進行監聽
var wss = new WebSocket.Server({ port: 8080 });
?
// 當建立連接后，打印日志
wss.on('connection', function connection(ws) {
?console.log('建立連接');// 同時返回服務端收到的信息ws.on('message', function incoming(message) {// const buffer = Buffer.from(message,'hex')// console.log('ddd',buffer.toString('utf-8'));// console.log('message',message);console.log('接受前端消息: %s', message);});
?// 返回信息ws.send('接收到消息了');
});
?
// 綁定訪問地址
app.get('/', function (req, res) {res.sendfile(__dirname + '/index.html');
});
?
app.listen(3000);

5.來到終端運行服務

node ./app.js

6.websocket服務地址

本機ip+3000端口

來到uni-app+vue3項目

1.來到工具文件utils下創建websocket.js 文件-代碼如下

import {ref
} from "vue"
?
?
const websoket = ref(null);
?
?
const webSoketInit = (role, id) => {
?const wsUrl = "ws://localhost:8080"
?// return Promise
?websoket.value = uni.connectSocket({url: wsUrl,success: () => {console.log('websoket連接成功');},fail: () => {console.log('websoket連接失敗');uni.showToast({title: 'websoket連接失敗',icon: 'error',duration: 2000,});},});
?websoket.value.onOpen((res) => {if (websoket.value.readyState === 1) {websoket.value.send({data: '測試回復',})}
?});
?websoket.value.onClose(() => {console.log('已經被關閉了');});
?websoket.value.onMessage((res) => {console.log('接收到后端發送消息', res);});
?
};
?
// 獲取websocket對象
const getWebSocket = () => {return websoket
};
?
?
// 關閉websocket【離開這個頁面的時候執行關閉
const closeSocket = () => {websoket.value.close({success(res) {this.is_open_socket = false;console.log('關閉成功', res);},fail(err) {console.log('關閉失敗', err);},});
};
?
const sendMessage = (message) => {console.log("發送消息", message)
?if (websoket.value.readyState === 1) {websoket.value.send({data: message,})}
};
export {getWebSocket,websoket,webSoketInit,closeSocket,sendMessage,
};

?

2.來到任意頁面-初始化建立連接

<script setup>import {nextTick} from "vue"
?import {onLoad,onReady} from "@dcloudio/uni-app";
?
?// websocket 通訊import {getWebSocket,websoket,webSoketInit,closeSocket,sendMessage} from "@/utils/webSocket.js"
?// 判斷當前視口大小onLoad((options) => {webSoketInit()})onReady(() => {?// 獲取websocket對象let ws = getWebSocket()
?
?// 接受后端消息觸發ws.value.onMessage((e) => {console.log('接受后端消息', e);})})
</script>

?

3.如圖-代碼效果

注意細節

1.前端使用websoket.value.send() 發送消息時后端接收一直都是undefined

• 因為我們不是使用的瀏覽器的websocket對象，使用的是uni-app封裝過一層的uni.connectSocket

• 想在我們的實例對象是uni.connectSocket，需要按照uni-app的格式發送數據（{data：'數據'}）

• 官網地址-uni.connectSocket(OBJECT) | uni-app官網

• 如圖

• 

2.真機模擬時發現只有運行連接成功接收到消息，再用按鈕觸發后端服務也收不到消息-連接是成功的

• 因為本機運行到瀏覽器測試時，是可以訪問到自己內網服務

• 真機運行雖然也是局域網連接wifi-但手機機制可能只會去公網上找-意思就是服務要上線

---

總結：

經過這一趟流程下來相信你也對 uni-app+vue3 +uni.connectSocket 使用websocket 有了初步的深刻印象，但在實際開發中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！

有什么不足的地方請大家指出謝謝 -- 風過無痕