react+koa+socket.io实现群聊功能

背景

一直都想了解一下websocket，但是之前都半途而废了，最近项目压力不大，了解并整理一下其中内容。之前网上搜的教程说实话，项目有，理解起来不好理解（之前说过了，我有点笨），现在理解了，便迫不及待的分享出来。说实话，ui啊，细节啊都没怎么处理，但是，基本功能有了，就是websocket。什么？你也有类似的困惑，看这篇文章就对了！

项目准备

还是在之前项目基础上添加的功能。

koa+mongoose 后端框架 github

react+redux 前端框架 github

话说回来，本文重点讲述websocket如果上述两个框架你不了解，还能不能往下看？可以的。

服务端引入yarn add socket.io, 前端引入yarn add socket.io-client

正文

socket.io连接koa

网上好多文章，包括socket.io官网都介绍了如何通过express连接socket.io,但是现在已然是koa的天下了，这里嫌弃一下官网不与时俱进的态度。因为这两个框架的不同，导致连接方式也不尽相同，功夫不负有心人，我终于找到正确方式了。下面给答案。

const app = new Koa()
const http = require('http').Server(app.callback())
const io = require('socket.io')(http)
io.on('connection', function(){})
http.listen(8080,function(){console.log('app started at port 8080...')})

值得注意的是最后一句话，之前koa内置的是有http服务的，但是这次由于socket.io的需要，便引入了一个新的，而且之前的app.listen的写法也不可以了，要用http去启动服务。

方法介绍

io.on(‘connection’, function(socket){}) 连接动作发生，包含了一个回调函数，参数socket，每次连接都会有一个socket.id产生。同一客户端产生同一id，不同客户端产生不同id。客户端泛指一个web项目，同一浏览器启动的两个页面算两个客户端，同一页面启动的同一项目属于一个客户端。

socket.emit(‘open’，‘123’) 向当前连接的用户广播消息，需要在对应的端接收消息，接收方式为

socket.on('open',function(msg){
  console.log(msg) // 123
})

前面的字符串就好像是口令一般，发送方和接收方要对上口令才算行。所以比如像实现一个单聊功能，那就是

发送方 小刚发送给小明

socket.emit('sendMsg',{
  msg:'在吗?'，
  to: 'xiaoming',
  from: 'xiaogang'
})

服务器 接收并转发消息

socket.on('sendMsg', fucntion(obj){ // obj就是小刚发送的消息
	socket.emit('toxiaoming',obj)    
})

接收方 ,通过obj可以得知是刚发给自己的消息

socket.on('toxiaoming',function(obj) {
  console.log(obj.msg)
})

我这边具体实现呢，后台代码就是一个/socket.js文件，导出为一个接收io的函数。

前端代码则是/containers/Chat.js文件，具体流程为

• 点击房间号创建连接并设置监听，如果之前有连接，先关闭连接。
• 点击发送消息，判断不为空便发送至服务器转发 。
• 组件结束时，关闭连接。

运行效果图：


参考链接
在理解上给与了很大的帮助，感谢文章的作者。