前言本文仅对不熟悉react中使用socket.io和websocket初学者有帮助。下面动图所示的聊天系统是用react+express+websocket搭建的。这是非常模糊的。这就是我要的。我打开了2个窗口并创建了2个用户来提问和回答。没有先进的技术。对于很多想要接触websocket的前端工程师来说，如果不擅长后端websocket代码，可能就是一个硬伤。开发环境server：expressserverclient：react技术栈，开发环境采用前端server的方式，打包后将静态资源放在server目录下进行测试。基本介绍如果你想实现一个实时的双向通信聊天系统，你可能会想到ajax轮询（长轮询或短轮询），但你最想要的是websocket的实现。在写测试代码之前，一直在纠结前端用什么，后端用什么。后来后端选择了express，前端选择了react。1、服务端使用的js库expresssocket.io。前端使用的js库"react":"^16.2.0","re??act-dom":"^16.2.0","socket.io-client":"^2.0.4"expressserver实现我不想讲server的实现，可以去看官方demo，代码很详细：socket官方demo实现了server的核心代码：io.on('connection',function(socket){//当客户端发送“新消息”时，服务端监听并执行相关代码socket.on('newmessage',function(data){//广播给用户执行“新消息”socket.broadcast.emit('newmessage',{});});//当客户端发出“添加用户”时，服务端监听并执行相关代码socket.on('adduser',function(username){socket.username=username;//服务器告诉当前用户执行'login'指令socket.emit('login',{});});//当用户断开连接时执行该指令socket.on('disconnect'，功能（）{}）;}）;socket有点像mongodb，需要创建一个socket服务，创建成功后，可以使用on()监听一个动作，这里的动作是指'newmessage','adduser','login'and其他命令，这些命令可以自己命名。这些指令有什么作用？客户端和服务器建立套接字通信后，服务器可以向客户端发出指令，客户端也可以向服务器发出指令。开发者需要约定一套指令系统，用于双方之间的通信。例如，如果服务器创建了一条“新消息”指令，但客户端没有创建这条指令，则客户端无法接收到来自服务器的指令。客户端可能心里在想：服务端哥们在干什么？客户端还需要'newmessage'命令，这样双方才能达成通信协议，双方可以互相发送这个命令，告诉对方最新的状态。上面的代码提到了socket.emit()和socket.broadcast.emit()的两种用法。您可以在下面查看emit用法的详细说明。//发送给当前请求套接字通信的客户端socket.emit('message',"thisisatest");//发送给除发送者之外的所有客户端socket.broadcast.emit('message',"thisisatest");//发送给"游戏"房间（频道）中的所有客户端，发送者除外socket.broadcast.to('game').emit('message','nicegame');//发送给所有客户端，包括发送者io.sockets.emit('message',"thisisatest");//发送给“游戏”房间（频道）的所有客户端，包括发送者io.sockets.in('game').emit('message','coolgame');//发送到指定的socketidio.sockets.socket(socketid).emit('message','foryoureyesonly');Thissocket的行为更像redux，但redux是单向数据流，而socket是双向的。React客户端的实现React客户端的实现才是我们应该关注的。作为前端工程师，往往只需要配合后端高手（全栈除外）。1.在react组件中引入socket.io-client。前端使用socket.io-client库，使用起来非常简单。在下面的代码中，直接导入socket.io-client，指向服务端的ip+端口。importReact,{Component}from'react'//require('socket.io-client')('serverip+port')constsocket=require('socket.io-client')('http://localhost:3077');classAppextendsComponent{}2、在componentDidMount中写入socket的接收命令actionsocket.on()，设置服务端同意的命令。当服务器发送这些命令时，客户端可以接收它们。这时候可以根据后端返回的数据在回调函数中做前端处理，比如设置状态，渲染服务端推送的数据等。componentDidMount(){socket.on('login',(data)=>{console.log(data)});socket.on('添加用户',(data)=>{console.log(data)});socket.on('新消息',(data)=>{console.log(data)});}3。客户端向服务器推送数据。很多时候，客户端还需要告诉服务端有新的数据更新，当你在聊天界面发送新消息时，此时需要通过socket.emit()方法告诉服务端，即与从服务器推送的方法相同。socket.emit('newmessage',value)总结1.当你想告诉对方一些事情时，使用socket.emit()。2.当你想接收对方的话时，使用socket.on()。3.emit也用于点对点和广播。4.最后就是这些基础知识了。
