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?的官方文檔進行配置和使用

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

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

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

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

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

   let socket = null
   

#1.1.2 創建和銷毀 socket 實例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#1.1.5 向服務器發送消息

1. 客戶端調用?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 = ''
   }