摘要：前奏這篇文章僅對(duì)不熟悉在中使用的人以及入門者有幫助。基本介紹想要實(shí)現(xiàn)一種實(shí)時(shí)的雙向通信聊天系統(tǒng)，你可能會(huì)想到輪詢長(zhǎng)或短，但你最想要的還是的實(shí)現(xiàn)?？蛻舳说膶?shí)現(xiàn)端的實(shí)現(xiàn)，才是我們應(yīng)該關(guān)注的重點(diǎn)。

這篇文章僅對(duì)不熟悉在react中使用socket.io的人、以及websocket入門者有幫助。

下面這個(gè)動(dòng)態(tài)圖展示的聊天系統(tǒng)是用react+express+websocket搭建的，很模糊吧，要得就是這樣的效果，我自己開了2個(gè)窗口，創(chuàng)建2個(gè)用戶自問自答。沒有什么高深的技術(shù)，對(duì)于很多想接觸websocket的前端工程師來說，不擅長(zhǎng)后端的websocket代碼可能是硬傷。

服務(wù)端：express服務(wù)器

客戶端：react技術(shù)棧，開發(fā)環(huán)境采用前端服務(wù)器的方式，打包后將靜態(tài)資源放到服務(wù)端目錄下做測(cè)試。

想要實(shí)現(xiàn)一種實(shí)時(shí)的雙向通信聊天系統(tǒng)，你可能會(huì)想到ajax輪詢（長(zhǎng)或短），但你最想要的還是websocket的實(shí)現(xiàn)。

在寫測(cè)試代碼之前，我糾結(jié)于前端用什么，后端用什么，后來后端選擇了express、前端是react。

1、服務(wù)端使用到的js庫(kù)

express

socket.io

2、前端使用到的js庫(kù)

"react": "^16.2.0",
"react-dom": "^16.2.0",
"socket.io-client": "^2.0.4"

服務(wù)端的實(shí)現(xiàn)我不想多講，你可以去看官方demo，代碼很詳細(xì)：socket官方demo實(shí)現(xiàn)

服務(wù)端的核心代碼：

io.on("connection", function (socket) {
    // 當(dāng)客戶端發(fā)出“new message”時(shí)，服務(wù)端監(jiān)聽到并執(zhí)行相關(guān)代碼
    socket.on("new message", function (data) {
        // 廣播給用戶執(zhí)行“new message”
        socket.broadcast.emit("new message", {});
    });
    
    // 當(dāng)客戶端發(fā)出“add user”時(shí)，服務(wù)端監(jiān)聽到并執(zhí)行相關(guān)代碼
    socket.on("add user", function (username) {
        socket.username = username;
        //服務(wù)端告訴當(dāng)前用戶執(zhí)行"login"指令
        socket.emit("login", {});
    });
    
    // 當(dāng)用戶斷開時(shí)執(zhí)行此指令
    socket.on("disconnect", function () {});
});

socket和mongodb有點(diǎn)像，它需要?jiǎng)?chuàng)建一個(gè)socket服務(wù)，創(chuàng)建成功之后，就可以通過on()去監(jiān)聽一個(gè)action，action在這里表示的是 "new message"、"add user"、"login"等指令，這些指令是可以自己命名的。

這些指令有什么作用呢？

當(dāng)客戶端和服務(wù)端建立socket通信之后，服務(wù)端可以向客戶端發(fā)出指令，客戶端也可以向服務(wù)端發(fā)出指令，開發(fā)者需要先給雙方的通信約定一套指令系統(tǒng)。

比如服務(wù)端創(chuàng)建了一個(gè) "new message"的指令，但是客戶端沒有創(chuàng)建這個(gè)指令，就會(huì)導(dǎo)致客戶端無法接收到服務(wù)端發(fā)出的這個(gè)指令?？蛻舳诵睦锟赡茉谙耄悍?wù)端老兄在瞎bb什么？

客戶端也需要 ’new message’指令，這樣雙方就能達(dá)成一套通信的協(xié)議，雙方可以互相發(fā)出這條指令告訴對(duì)方最新的狀態(tài)。

上面代碼提到了socket.emit()和socket.broadcast.emit()2種用法，可以看看下面關(guān)于emit用法的詳細(xì)解釋。

// 發(fā)送到當(dāng)前請(qǐng)求socket通信的客戶端
socket.emit("message", "this is a test");

// 發(fā)送給所有客戶端，除了發(fā)件人
socket.broadcast.emit("message", "this is a test");

// 發(fā)送給“游戲”房間（頻道）中的所有客戶，發(fā)件人除外
socket.broadcast.to("game").emit("message", "nice game");

// 發(fā)送給所有的客戶，包括發(fā)件人
io.sockets.emit("message", "this is a test");

// 發(fā)送給“游戲”房間（頻道）的所有客戶，包括發(fā)件人
io.sockets.in("game").emit("message", "cool game");

// 發(fā)送給指定的socketid
io.sockets.socket(socketid).emit("message", "for your eyes only");

socket的這種行為更像是redux，但是redux是單向數(shù)據(jù)流，而socket是雙向。

React端的實(shí)現(xiàn)，才是我們應(yīng)該關(guān)注的重點(diǎn)。

作為一個(gè)前端工程師，往往只需要和后端大神配合即可（全棧除外）。

1、在react組件中導(dǎo)入socket.io-client

前端使用的是socket.io-client庫(kù)，這個(gè)庫(kù)使用非常簡(jiǎn)單。下面的代碼中，直接導(dǎo)入socket.io-client并且指向服務(wù)端的ip+端口即可。

import React, { Component } from "react"

//require("socket.io-client")("服務(wù)端ip+端口")
const socket = require("socket.io-client")("http://localhost:3077");

class App extends Component {
    
}

2、在componentDidMount寫socket的接收指令action

socket.on()設(shè)置了服務(wù)端約定好的指令，當(dāng)服務(wù)端發(fā)出這些指令時(shí)，客戶端就能接收到。這時(shí)候，你可以在回調(diào)函數(shù)里面根據(jù)后端返回的數(shù)據(jù) data 做前端的處理，比如設(shè)置state的狀態(tài)，渲染服務(wù)端推送的數(shù)據(jù)。

componentDidMount() {
        socket.on("login", (data) => {
            console.log(data)
        });
        socket.on("add user", (data) => {
            console.log(data)
        });
        socket.on("new message", (data) => {
            console.log(data)
        });
    }

3、客戶端推送數(shù)據(jù)到服務(wù)端

很多時(shí)候，客戶端也需要告訴服務(wù)端有新的數(shù)據(jù)更新，當(dāng)你在聊天界面發(fā)了一條新消息，這時(shí)候要告訴服務(wù)端，就通過socket.emit()方法，和服務(wù)端推送的方法是一樣的。

socket.emit("new message", value)

1、當(dāng)你想要告訴對(duì)方一些話時(shí)，使用socket.emit()。

2、當(dāng)你想接收對(duì)方的話時(shí)，使用socket.on()。

3、emit還有點(diǎn)對(duì)點(diǎn)、廣播等用法。

4、最后說一句，這些都是基礎(chǔ)知識(shí)。