鴻蒙Next開發實戰教程-使用WebSocket實現即時聊天

幽蓝计划發表於2024-12-07
鴻蒙Web

鴻蒙系統提供了WebSocket庫，使用它可以很方面的實現即時聊天功能，今天就使用WebSocket來實現一個完整的聊天功能。

首先建立一個WebSocket例項：

let ws = webSocket.createWebSocket()

然後建立WebSocket連線，我找到一個簡單的ws地址，它直接返回我們傳送的訊息：

let url = 'ws://124.222.224.186:8800'
this.ws.connect(url,(err,value)=>{  
  if(!err){    
    console.log('連結成功');    
    this.isConnected = true 
   }else {    
     console.log('連線失敗')  
   }
})

接下來訂閱WebSocket的相關事件，首先訂閱WebSocket的開啟事件，傳送訊息等事件要在該事件後才可以使用：

this.ws.on('open', (err: BusinessError, value: Object) => {  
  console.log("on open, status:" + (value as OutValue).status + ", message:" + (value as OutValue).message);  
  // 當收到on('open')事件時，可以透過send()方法與伺服器進行通訊
});

然後訂閱訊息事件：

this.ws.on('message',(error: BusinessError, value: string | ArrayBuffer) => {  
   console.log("on message, message:" + value);  
   let content:string = value.toString()  
   const reg = /<.*?>/g  
   content = content.replace(reg,'')  
   let item:MessageClass = {    id:'1',    content:content  }  
   this.msgList.push(item)  
   this.listScroller.scrollToIndex(this.msgList.length,true)
});

由於返回的訊息為富文字，我這裡加了一個正則過濾html標籤，然後把它們存到陣列裡便於展示。

當我們傳送訊息時，可以呼叫send方法：

this.ws.send(content, (err: BusinessError, value: boolean) => {  
  if (!err) {    
    console.log("send success");      
  } else {    
    console.log("send fail, err:" + JSON.stringify(err));  
  }
});

另外，當需要關閉連線時可以呼叫close方法：

this.ws.close()

以上就是一個即時聊天功能的實現過程

相關文章