在js中如何使用websocket实现长连接

实现该功能的目的

最近在练习写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; 获取所有的频道

未完待续…