類似上圖點擊送禮顯示彈幕，只要進入同一頁面的人都可以看到彈幕，
主要實現用WebSocket鏈接后端服務器發送推送接收服務器消息實現，下面主要實現邏輯及部分代碼，有不對之處請多多指點
1，拿到后端寫的WebSocket鏈接地址，然后進行鏈接
data{
return {
//存儲websoket（便以在其他地方使用）
socketTask: null,
//用於標識是否已經鏈接
isOpenSocket ：false,
}
}，
onLoad（）{
//進入頁面執行鏈接方法
this.connectSocketInit()
}，
methods：{
// 進入這個頁面的時候創建websocket連接【整個頁面隨時使用】
connectSocketInit() {
// 1連接地址
this.socketTask = uni.connectSocket({
url: 'wss://192.168.110.189:9000/setque',//鏈接地址，僅參考
success: () => {//成功函數
}
})
//連接成功后向服務器發送消息
this.socketTask.onOpen((res) => {
//修改為true已連接
this.isOpenSocket = true;
console.log("WebSocket連接正常打開中...！");
//進入頁面鏈接成功向后段發送進入的通知其他在里面的接收服務器消息既可以看到有人進入
let messge = {
//0標識進入，1表示留言，2標識送禮等
code: 0,
//當前頁面編號
museumNo: this.identifier,
//微信名稱
realName: this.join.nickname,
//頭像
avatar: this.join.avatar,
//類型
mournType: 2,
platformType: 0,
type: 0,
retry:this.isRetryConnect,
//彈幕內容
content: '進入頁面!',
}
// 保存訪客記錄（記錄保存到后端的方法）
this.saveOnleUserInfo(messge)
// 啟動心跳任務（寫好的一個方法）
this.handerHeartBeatTask()
//監聽socket斷開
uni.onSocketClose((res) => {
console.log('WebSocket 已關閉！', res);
this.progressBar=false
//判斷心跳測試方法定時存在關閉定時器（當鏈接斷開時不需要一直執行定時任務會影響性能）
if (this.heartBeatTask) {
//關閉心跳測試方法this.heartBeatTask
clearInterval(this.heartBeatTask)
}
if (!this.isCloseSocket) {
//斷線重連（寫好的一個方法）
this.retryConnect()
}
});
})
// 監聽服務器消息
this.socketTask.onMessage((res) => {
console.log("收到服務器", res.data);
下面下就是將接收到的內容以彈幕的形式發出去......需求邏輯自己定
}）
// 監聽服務器連接失敗
this.socketTask.onError(() => {
//斷線重連
this.retryConnect()
})
},
/*心跳測試(方法)*/
handerHeartBeatTask() {
if(this.heartBeatTask){
clearInterval(this.heartBeatTask)
}
this.heartBeatTask = setInterval(() => {
this.send(this.codes)
this.loading = false
console.log(this.loading,"發送心跳包", this.isOpenSocket);
}, 10000)
},
//斷線重連(方法)
retryConnect() {
this.isOpenSocket = false;
this.isRetryConnect = true;
//斷線5秒后自動重連
setTimeout(() => {
this.connectSocketInit()
}, 5000)
},
/*給websocket發送信息（方法）*/ messages：要向后端發送的消息，如發送留言，在點擊發送按鈕時將留言內容如->this.send(‘留言內容’) 這樣傳入send方法接收
send(messages) {
if (this.isOpenSocket) {
messages.platformType = "0"
this.socketTask.send({
data: JSON.stringify(messages),//內容轉為json格式
})
}
},
/*離開頁面關閉socket連接（方法）*/
closeSocket() {
if (this.isOpenSocket) {
this.socketTask.close({
success: () => {
this.isOpenSocket = false
this.isRetryConnect = false
this.isCloseSocket = true
}
})
}
},
}，
這個是本人在上線項目使用的，項目已經上線一切運行正常，如有不足之處請多多指教