1.0 認識 websocket

#1.0.1 什么是 websocket

和 http 協議類似，websocket 也是是一個網絡通信協議，是用來滿足前后端數據通信的。

#1.0.2 websocket 相比于 HTTP 的優勢

HTTP 協議：客戶端與服務器建立通信連接之后，服務器端只能被動地響應客戶端的請求，無法主動給客戶端發送消息。

websocket 協議：客戶端與服務器建立通信連接之后，服務器端可以主動給客戶端推送消息了！！！

#1.0.3 websocket 主要的應用場景

需要服務端主動向客戶端發送數據的場景，比如我們現在要做的智能聊天

#1.0.4 HTTP 協議和 websocket 協議對比圖

1.1 vue3組合api中socket.io-client 的基本使用

#1.1.1 安裝和配置 socket.io-client

參考?socket.io-client?的官方文檔進行配置和使用

在項目中運行如下的命令，安裝 websocket 客戶端相關的包：

npm i socket.io-client@4.0.0 -S# 如果 npm 無法成功安裝 socket.io-client，可以嘗試用 yarn 來裝包 # yarn add socket.io-client@4.0.0

在?xx.vue?組件中，從?socket.io-client?模塊內按需導入?io?方法：

// 按需導入 io 方法：調用 io('url') 方法，即可創建 websocket 連接的實例 import { io } from 'socket.io-client'

事先setup中定義變量?socket，用來接收?io()?方法創建的 socket 實例：

let socket = null

#1.1.2 創建和銷毀 socket 實例

在?xx.vue?組件的setup?onMounted生命周期函數中，創建 websocket 實例對象：

onMounted(() => {// 創建客戶端 websocket 的實例socket = io('ws://www.liulongbin.top:9999') })

在 xx.vue?組件的setup?onBeforeUnmount生命周期函數中，關閉 websocket 連接并銷毀 websocket 實例對象：

// 組件被銷毀之前，清空 sock 對象 onBeforeUnmount(() => {// 關閉連接socket.close()// 銷毀 websocket 實例對象socket = null })

#1.1.3 監聽連接的建立和關閉

在?xx.vue?組件的setup??onMounted?生命周期函數中，調用?socket.on('connect', fn)?方法，可以監聽到 socket 連接成功的事件：

// 建立連接的事件 socket.on('connect', () => console.log('connect: websocket 連接成功！'))

在?xx.vue?組件的?created?生命周期函數中，調用?socket.on('disconnect', fn)?方法，可以監聽到 socket 連接關閉的事件：

// 關閉連接的事件 socket.on('disconnect', () => console.log('disconnect: websocket 連接關閉！'))

#1.1.4 接收服務器發送的消息

在?Chat.vue?組件的?setup??onMounted?生命周期函數中，調用?socket.on('message', fn)?方法，即可監聽到服務器發送到客戶端的消息：

// 接收到消息的事件 socket.on('message', msg => console.log(msg))

將服務器發送到客戶端的消息，存儲到 xx.vue?組件的?list?數組中：

// 接收到消息的事件 socket.on('message', msg => {// 把服務器發送過來的消息，存儲到 list 數組中this.list.push({ name: 'xs', msg }) })

#1.1.5 向服務器發送消息

客戶端調用?socket.emit('send', '消息內容')?方法，即可向 websocket 服務器發送消息：

// 提交按鈕的點擊事件處理函數 const send = () => {// 如果輸入的聊天內容為空，則 return 出去if (!this.word) return// 向服務器發送消息socket.emit('send', this.word)// 將用戶填寫的消息存儲到 list 數組中this.list.push({ name: 'me', msg: this.word })// 清空文本框中的消息內容this.word = '' }

總結

以上是生活随笔為你收集整理的vue3中websocket用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。