Vue 使用 Vue-socket.io 实现即时聊天应用（通讯篇）

Posted 2022-04-13 ~朴：shu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 使用 Vue-socket.io 实现即时聊天应用（通讯篇）相关的知识，希望对你有一定的参考价值。

1. 上次的博客已经讲述了如何建立服务器，如何建立客户端，并且与服务器进行连接，那么本文接着上次，讲述一下客户端与服务器端的通讯是如何实现的。

PS:事件的发布与监听、广播事件、私聊事件、其他常用事件。

2. 事件的发布与监听：

2.1 emit（）、on（）：

在vue中，组件可以发布自定义事件，使用emit，其他地方直接使用 on 监听这个事件即可。而socket.io 也是类似的，发布事件用 emit ，监听事件用 on；

// 监听客户端连接
io.on("connection", function (socket) 
	/* 每一个连接上来的用户，都会分配一个socket */
	console.log("客户端有连接");
	
	/* 监听登录事件 */
	socket.on('login', data => 
		console.log('login', data);
	);

	// 给客户端发送消息（发布welcome事件）
	socket.emit("welcome", "欢迎连接socket");

	/* socket实例对象会监听一个特殊函数，关闭连接的函数disconnect */
	socket.on('disconnect', function () 
		console.log('用户关闭连接');
	);
);

例如上的代码，服务器端监听了‘connection’事件，（connection事件是socket的默认事件，指的是用户连接），还监听了login事件，发布了一个 welcome事件，监听一个disconnection事件，（disconnection也是默认事件，指的是用户断开连接）

2.2 发布与监听：

发布事件，就是我想给你发消息。监听事件，就是我想收到你的消息。就是一个 ‘发-收’ 的关系。（我自己的理解哈）

3. 客户端监听与发布：

/* socket是监听服务器发布的自定义事件 */
  sockets: 
    /* 监听welcome事件 */
    welcome:function(data)
      console.log("welcome data 数据返回 = >", data);
    ,
  ,

这个是监听服务器发布的事件，用sockets监听；

methods: 
    /* 登录 */
    login()
      console.log("login",this.username);
      /* 发送数据到服务器 */
      this.$socket.emit('login',this.username);
      this.isLogin=true;
      this.msgList.push(type:'',msg:this.username+'登录成功');
    ,

这个是发布事件，定义在methods中，使用 this.$socket.emit();

4. 启动服务器与Vue：

连接了两个客户端，服务器输出连接消息；

5. 群聊事件

到此，已经简单讲述了事件的发布于监听，而socket.io的通讯就是建立在这个基础上。

我们使用vue-socket.io做聊天应用，无非就是私聊和群聊，下面慢慢来探究里面的技术；

5.1 普通群聊：

socket.io 在群聊的处理上，是非常棒的！Introduction | Socket.IO 这个是socket.io 的官方文档，里面有更详细的描述。

我们还是先看一下服务器端的代码：

var io = require("socket.io")(http, 
	allowEIO3: true,
	cors: 
		origin: "http://localhost:8080",
		methods: ["GET", "POST"],
		credentials: true
	
);

// 监听客户端连接
io.on("connection", function (socket) 
	/* 每一个连接上来的用户，都会分配一个socket */
	console.log("客户端有连接");
	
	/* 监听登录事件 */
	socket.on('login', data => 
		console.log('login', data);
	);

	// 给客户端发送消息（发布welcome事件）
	socket.emit("welcome", "欢迎连接socket");

	/* socket实例对象会监听一个特殊函数，关闭连接的函数disconnect */
	socket.on('disconnect', function () 
		console.log('用户关闭连接');
	);
);

我先解释一下，这里面有两个非常重要的变量：io、socket；

io是socket服务器对象（servers）；

socket是每一个连接上来的客户端实例；

所以群聊，就是给连接上来的所有人发送消息！而所有人存在io 服务器对象中，因此，广播事件：

io.emit("hello", "world");

5.2 socket.io 官方文档中，还有一点需要我们去注意的。

Rooms：A room is an arbitrary channel that sockets can join and leave. It can be used to broadcast events to a subset of clients:

我们可以加入房间或者离开房间，在广播事件的时候，就可以直接广播给该房间的客户端。

5.1我们说的是给连接上来的所有人,而现在这个是指定房间的客户端，还是有很大的区别的。

那么，我们如何定义房间，并给指定房间的客户端发送消息呢？

// 在客户端连接的时候，指定加入某一个房间
io.on("connection", (socket) => 
  socket.join("some room");
);

// 给指定房间的客户端连接发送消息
io.to("some room").emit("some event");

下面是房间的相关事件：

有兴趣的可以试试

以上便是群聊的相关方法。

5.2 私聊：

官方文档并没有过多的描述私聊的实现，只是给了一段示例代码：

  // to individual socketid (private message)
  io.to(socketId).emit(/* ... */);

对于这个私聊，下面我说说我的理解。

6. socket.io 私聊实现方案：

6.1 新建数组实现

上述中的代码，我们只要找到你想私聊的客户端的socketid，调用这个API即可。但是连接上来的这么多客户端，我们是如何得知你想发送的对象的sockeid呢？

我们修改服务器端的代码如下：

//  定义数组接收数据
var socketInfo=[];

/* 监听登录事件 */
socket.on('login', data => 
	console.log('login', data);
	/* 将用户的id与socketid对应 */
	socketInfo.push(
		userid:data,
		socketid:socket.id
	);
	console.log(socketInfo);
);

客户端：

服务器端：

这样一来，你想给谁发消息，只要在数组中遍历userid,取到这个socketid，即可实现。具体代码如下：（现在我是固定的 2 号，具体根据实际项目调整）

客户端：

 /* 发送消息 */
    send() 
      /* 给服务器发送消息，就是发布一个事件，服务器监听即可！ */
      this.$socket.emit("1-2", 
        userid:'2',
        msg:this.msg,
      );
      this.msg=''
    ,

不难理解，需要带一个用户id，来唯一识别你想给谁发消息。同时，还要监听服务器发送过来的数据：

 /* socket是监听服务器发布的自定义事件 */
  sockets: 
    /* 监听私聊事件 */
    chatPrivate:function(data)
      console.log('有人找我私聊了',data);
    ,
    /* 监听welcome事件 */
    welcome:function(data)
      console.log("welcome data 数据返回 = >", data);
    ,
  ,

服务器端：

/* 这里我们模拟 1 给 2 发消息 */
	socket.on('1-2',data=>
		/* 遍历数组 */
		socketInfo.forEach(s=>
			/* 判断该对象是不是我们需要发送的那个人 */
			if(s.userid==data.userid)
				/* 发送数据 */
				io.to(s.socketid).emit('chatPrivate',data.msg);
			
		);
	);

实现效果：

1号发送数据：

2号接收数据：

以上便是基于数组实现私聊，总结一下，就是要对应连接上来的用户ID，和连接的socketid，当我发起私聊的时候，能够找到对应用户的socketid即可！根本就是找到对方的socketid！

6.2 基于io服务器实例实现

io是socket服务器对象（servers）；

socket是每一个连接上来的客户端实例；

这次我们不用建立数组，用原始的方式实现。socket是连接实例，肯定是一个对象，因为我们取id，是通过socket.id实现的。所以我们可以在对象上追加一个属性：userid；

那么，大概会变成这样子：

原来的socket：

socket：

...

id:XXXXXXXXX

...

加了自定义属性后：

socket：

...

id:XXXXXXXXX

userid:XXXXXX

...

这样，我们不就可以直接遍历存放socket的容器，找到userid，再取socketid不就实现了嘛？？换句话说，连接上来的socket，应该是放在一个默认的数组中。这个默认的数组是什么？io?

socket添加自定义属性：

/* 监听登录事件 */
	socket.on('login', data => 
		console.log('login', data);
		/* 添加自定义属性 */
		socket.userid=data;
	);

下面是输出的io

感兴趣的小伙伴可以慢慢研究。

<ref *1> Server 
  _events: [Object: null prototype] ,
  _eventsCount: 0,
  _maxListeners: undefined,
  
  .....
  //此处省略
  encoder: Encoder ,
  _adapter: [class Adapter extends EventEmitter],
  sockets: <ref *2> Namespace 
    _events: [Object: null prototype]  connection: [Function (anonymous)] ,
    _eventsCount: 1,
    _maxListeners: undefined,
    sockets: Map(2) 
      'R_pZZihjSjxrh8VaAAAA' => [Socket],
      's2KCyEX2y0tBgDXhAAAC' => [Socket]
    ,
    _fns: [],
    _ids: 0,
    server: [Circular *1],
    name: '/',
    adapter: Adapter 
      _events: [Object: null prototype] ,
      _eventsCount: 0,
      _maxListeners: undefined,
      nsp: [Circular *2],
      rooms: [Map],
      sids: [Map],
      encoder: Encoder ,
      [Symbol(kCapture)]: false
    ,
    [Symbol(kCapture)]: false
  ,
  
 ........
//此处省略

相信有感觉的已经找到了socket！没错，就是io.sockets.sockets。（一定要注意：io.sockets.sockets 是存放所有连接的用户实例的数组！！数组！！（Map(2)））

我简单说一下为什么是io.sockets.sockets:

理论上，应该是io.sockets就行了，第一个很好理解，io指的是Server,第二个sockets指的是命名空间，因为同一个服务器，可以根据不同的namespace分配不同的用户连接。这个请详细看官网说明，这里不再深入研究。

涉及了一个命名空间，所以才是io.sockets.sockets

那么，有了这个数据，我们就遍历这个，找到对应userid和socketid，不就能实现了嘛？

/* 定义变量接收这个数组：一般我简写 scs */
var SocketConnections=io.sockets.sockets;
console.log("客户端有连接");
	
/* 监听登录事件 */
socket.on('login', data => 
	console.log('login', data);
	/* 添加自定义属性 */
	socket.userid=data;
);
	
/* 这里我们模拟 1 给 2 发消息 */
socket.on('1-2',data=>
	/* 遍历数组 */
	SocketConnections.forEach(s=>
    	/* 判断该对象是不是我们需要发送的那个人 */
		if(s.userid==data.userid)
			/* 发送数据 */
			io.to(s.id).emit('chatPrivate',data.msg);
		
	);
);