【React.js 16】Socket.io实现实时软件

Socket.io是基于websocket的库，可以帮助我们实现实时通讯软件。

安装

服务端：

npm install socket.io--save

客户端：

npm install socket.io-client --save

---

配合Express使用

server.js中引入:

//work with express
const server = require('http').Server(app)
//引入socket.io
const io = require('socket.io')(server)

因为在app对象上又包了一层server，所以原来的app.listen就要改成server.listen:

server.listen(9093,function(){
  console.log('Node app start at port 9093');
})

这样socket.io就和express绑定起来了

监听事件

//socket.io的事件监听
io.on('connection',function(socket)){
  console.log('user is login');
}

测试下是否能监听到连接

客户端使用

//引入
import io from 'socket.io-client'

//连接
//由于现在前端接口在3000，后端在9093 是跨域的情况，需要手动连接9093端口，注意协议不是http了，是ws(websocket)
const socket = io('ws://localhost:9093')

然后可以看到Express在终端打印

连接成功

代表我们初步已经连接成功了。

触发socket的事件：

//我们写一个方法来触发socket的事件
//客户端触发
handleSubmit(){
  //触发一个sendmsg事件，并且携带data
  socket.emit('sendmsg',{text:this.state.text})
}

//服务端监听
//io监听连接事件，对应哪个socket连接上了，就传入socket参数
io.on('connection',function(socket){
  //对应的socket再监听名为sendmsg的事件触发
  socket.on('sendmsg',function(data){
    console.log('server receive :' ,data);
    // 然后我们再来让服务器监听到发送消息的事件后，触发出广播事件
    io.emit('recvmsg',data)
  })
})

//客户端也统一监听一个recvmsg事件
socket.on('recvmsg',function(data){
  console.log('client receive :' , data);
})

这样一旦客户端触发了sendmsg事件，我们就可以在终端看到携带过来的数据；
并且因为服务端监听到事件后会触发一个广播，所以所有客户端（包括发送的那个）监听的recvmsg事件都会收到一个服务端发送的数据。

这样，就简单的实现了一个基于socket的实时消息传输的功能。