React系列——websocket群聊系统在react的实现

前奏

这篇文章仅对不熟悉在react中使用socket.io的人、以及websocket入门者有帮助。

下面这个动态图展现的聊天系统是用react+express+websocket搭建的，很模糊吧，要得就是这样的效果，我本身开了2个窗口，建立2个用户自问自答。没有什么高深的技术，对于不少想接触websocket的前端工程师来讲，不擅长后端的websocket代码多是硬伤。

开发环境

服务端：express服务器

客户端：react技术栈，开发环境采用前端服务器的方式，打包后将静态资源放到服务端目录下作测试。

基本介绍

想要实现一种实时的双向通讯聊天系统，你可能会想到ajax轮询（长或短），但你最想要的仍是websocket的实现。

在写测试代码以前，我纠结于前端用什么，后端用什么，后来后端选择了express、前端是react。

一、服务端使用到的js库

express

socket.io

二、前端使用到的js库

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

express服务端的实现

服务端的实现我不想多讲，你能够去看官方demo，代码很详细：socket官方demo实现

服务端的核心代码：

io.on('connection', function (socket) {
    // 当客户端发出“new message”时，服务端监听到并执行相关代码
    socket.on('new message', function (data) {
        // 广播给用户执行“new message”
        socket.broadcast.emit('new message', {});
    });
    
    // 当客户端发出“add user”时，服务端监听到并执行相关代码
    socket.on('add user', function (username) {
        socket.username = username;
        //服务端告诉当前用户执行'login'指令
        socket.emit('login', {});
    });
    
    // 当用户断开时执行此指令
    socket.on('disconnect', function () {});
});

socket和mongodb有点像，它须要建立一个socket服务，建立成功以后，就能够经过on()去监听一个action，action在这里表示的是 'new message'、'add user'、'login'等指令，这些指令是能够本身命名的。

这些指令有什么做用呢？

当客户端和服务端创建socket通讯以后，服务端能够向客户端发出指令，客户端也能够向服务端发出指令，开发者须要先给双方的通讯约定一套指令系统。

好比服务端建立了一个 'new message'的指令，可是客户端没有建立这个指令，就会致使客户端没法接收到服务端发出的这个指令。客户端内心可能在想：服务端老兄在瞎bb什么？

客户端也须要 ’new message’指令，这样双方就能达成一套通讯的协议，双方能够互相发出这条指令告诉对方最新的状态。

上面代码提到了socket.emit()和socket.broadcast.emit()2种用法，能够看看下面关于emit用法的详细解释。

// 发送到当前请求socket通讯的客户端
socket.emit('message', "this is a test");

// 发送给全部客户端，除了发件人
socket.broadcast.emit('message', "this is a test");

// 发送给“游戏”房间（频道）中的全部客户，发件人除外
socket.broadcast.to('game').emit('message', 'nice game');

// 发送给全部的客户，包括发件人
io.sockets.emit('message', "this is a test");

// 发送给“游戏”房间（频道）的全部客户，包括发件人
io.sockets.in('game').emit('message', 'cool game');

// 发送给指定的socketid
io.sockets.socket(socketid).emit('message', 'for your eyes only');

socket的这种行为更像是redux，可是redux是单向数据流，而socket是双向。

React客户端的实现

React端的实现，才是咱们应该关注的重点。

做为一个前端工程师，每每只须要和后端大神配合便可（全栈除外）。

一、在react组件中导入socket.io-client

前端使用的是socket.io-client库，这个库使用很是简单。下面的代码中，直接导入socket.io-client而且指向服务端的ip+端口便可。

import React, { Component } from 'react'

//require('socket.io-client')('服务端ip+端口')
const socket = require('socket.io-client')('http://localhost:3077');

class App extends Component {
    
}

二、在componentDidMount写socket的接收指令action

socket.on()设置了服务端约定好的指令，当服务端发出这些指令时，客户端就能接收到。这时候，你能够在回调函数里面根据后端返回的数据 data 作前端的处理，好比设置state的状态，渲染服务端推送的数据。

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

三、客户端推送数据到服务端

不少时候，客户端也须要告诉服务端有新的数据更新，当你在聊天界面发了一条新消息，这时候要告诉服务端，就经过socket.emit()方法，和服务端推送的方法是同样的。

socket.emit('new message', value)

总结

一、当你想要告诉对方一些话时，使用socket.emit()。

二、当你想接收对方的话时，使用socket.on()。

三、emit还有点对点、广播等用法。

四、最后说一句，这些都是基础知识。