Socket實現簡易“多人聊天室”
一、了解
1、 簡單介紹
websocket能夠實現即時通訊和后台主動推送消息，但出於兼容性考慮，我們可以使用websocket的封裝庫 socket.io模塊。此模塊遵循socket協議。
2、 socket.io組成
l socket.io
l socket.io-client
二、實現流程
1、 新建一個自己文件夾，eg:socket_chat，在這個文件夾里新建兩個子文件夾，分別用來裝前端代碼和后端代碼。
2、 將放后端代碼的back拖入vs code中，打開終端。
3、 安裝express模塊
yarn add express –S(或者 cnpm i express –S ,具體輸入哪一條命令取決於你安裝的是哪個，yarn和cnpm的安裝速度相對npm來說要更快一些)。安裝好后，可以從左邊列表看到生成了如下文件：
4、安裝socket.io模塊
yarn add socket.io -S （或cnpm i socket.io –S，npm i socket.io -S）
安裝好后，可以打開package.json，看到已經生成的生產依賴。
5、在back目錄下新建一個js文件，eg:server.js，單獨構建一個socket服務器。
6、監聽socket連接
7、構建前端頁面，發送socket請求
8、用戶點擊按鈕即向socket發送數據，客戶前端向服務器后端發送消息
9、服務后端接受客戶前端發來的消息，並且回復前端已經收到消息
10、客戶端接受服務后端返回的消息
11、后端轉發前端發來的消息
12、整理前端代碼格式，並把后端發來的消息顯示在頁面上
13、到這里，已經建成一個可以發送信息的頁面了，前端頁面效果如下：
14、后端顯示
15、不過，這只是個單人模擬多人聊天，真正要讓用戶都可以通過加入聊天室，只需要將127.0.0.1改為自己本機的IP，用戶通過live-server插件進行訪問，端口號為5500，大家就可以真正加入同一聊天室，一個簡易的聊天室就搭建完成了。