实现该功能的目的
最近在练习写react的项目,就想着要不然就做一个交流软件来锻炼一下,这就需要用到长连接的功能了,也就是websocket,要做这块需要用到**“socket.io”**的插件.
下面分别说一下在服务器端和客户端要如何配置
1.服务器端
首先就是要下载socket.io插件,然后导入
npm install socket.io --save
为了让代码维护更加清晰,我们新建一个socket.js文件,通过一个函数实现server端socket的配置,最后将这个函数导出,这样在www文件中导入使用就可以了.
module.exports = (server) => {
const io = require("socket.io")(server, {
// 前后端分离跨域处理
cors: {
origin: "http://localhost:8080", //允许跨域的域名
methods: ["GET", "POST"],
},
});
}
这里需要特别注意的是: 因为我做这个是前后端分离的项目,所以就会遇到跨域的问题,那这里我是通过配置cors参数实现的,在属性origin上配置允许跨域的网站.保证前后端可以正常访问.
前后端连上之后呢,就要考虑收发消息要如何实现了.
在此之前先来了解一些东西
socket 和 io 的区别:socket是我们当前这次连接的请求, io是全局的请求
io.on(‘connection’,function(socket)); 监听客户端连接,回调函数会传递本次连接的socket
io.emit(“sendmsg”, data); 给所有客户端广播消息
socket.on(‘String’,function(data)); 监听客户端发送的信息
socket.emit(‘String’, data); 给该socket的客户端发送消息
socket.broadcast(‘String’, data); 给除了该socket的其他客户端发送消息
socket.join(channel); 创建一个频道(非常有用,尤其做分频道的时候,比如斗地主这种实时棋牌游戏)
io.sockets.in(channel); 加入一个频道
socket.broadcast.to(channel).emit(‘eventName’, msg); 向一个频道发送消息,不包括自己
io.sockets.adapter.rooms; 获取所有的频道
未完待续…