仿boss直聘聊天功能

最近仿boss直聘，开发了一个app，主要是为了做实时聊天的功能，实时聊天肯定需要至少两个用户登录app，所以在登录后就需要记住当前用户的唯一id，数据库用的是mongodb，创建用户后，会自动生成唯一的id
这里用的是vue-scoket.io ，首先npm安装相应的包

npm install vue-socket.io --save

以及

npm install socket.io-client --save

后者主要用户客户端，main.js中引入

import io from 'socket.io-client';
import VueSocketIo from 'vue-socket.io';

Vue.use(new VueSocketIo({
   debug: true,
   connection: io('http://localhost:3000/') //填后台给的socket地址，端口号根据实际后台端口写
}))

完成前台的配置，还需要启动服务，首先

var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

在js文件中引入相关的包文件

io.on('connection', socket => {
	socket.on("setConnect", data => {
		// 获取连接的用户
		let MeId = data.MeId
		// 放在在线用户数组中
		idArr.push(MeId)
		// 放在在线用户对象中
		connIds[MeId] = socket.id
	
	});
	// 监听用户点击发送过来的消息
	socket.on("sentTo", data => {
		// 获取发往对方的id a
		let toId = data.toId
		// 对方用户已连接
		if (io.sockets.connected[connIds[toId]]) {
			io.sockets.connected[connIds[toId]].emit('message', {
				'MeId': data.MeId,
				'toId': toId,
				'msg': data.sub,
				'direction': 'left'
			});
		}
	});

	socket.on('disconnect', function() {
		console.log(socket.id, "连接断开");
	});
});

通过上面的方式，在服务端来实现监听客户端的发送的信息。
在客户端中通过页面中的sockets中来监听服务端返回的信息

sockets: {
			//这里是监听connect事件
			connect: function(data) {
				// 获取每台客服端生成的id
				this.websocketid = this.$socket.id;
			},
			// 监听断开连接，函数
			disconnect() {
				console.log('断开服务器连接');
			},
			// 服务端指定有msg监听的客服端，可接对应发来的收消息，data服务端传的消息
			message(data) {
				console.log(data)
			},
		},

在进入页面后，客户端首先向服务端emit一个方法，后面是传递的参数，传递当前用户id，目的在于存储当前在线的用户
成功后保存。该方法名称需要与服务端监听的方法一样才能监听到

this.$socket.emit('setConnect',{MeId:_this.$store.state.role.currentId})

在发送按钮上绑定点击事件，点击发送的时候再次向服务端发送信息

this.$socket.emit('sentTo',{MeId:this.$store.state.role.currentId,toId:this.id,sub:this.newMessage})

传递要发送的对象，以及要发送的信息，传递当前用户是为了在离线时存入数据库，知道是谁向谁发送信息。

socket.on("sentTo", data => {
		// 获取发往对方的id a
		let toId = data.toId

		// 对方用户已连接
		if (io.sockets.connected[connIds[toId]]) {
			console.log('对方用户已连接')
			io.sockets.connected[connIds[toId]].emit('message', {
				'MeId': data.MeId,
				'toId': toId,
				'msg': data.sub,
				'direction': 'left'
			});

		}
	})

服务端在接收到信息后，首先判断对方用户是否存在,如果存在，实时转发到对方用户，对方用户通过sockets中定义的方法就能监听到服务端转发过来的信息。

message(data) {
				console.log(data)
			},