node.js + express + vue.js + socket.io小试身手【一】

node.js + express + vue + socket.io 搭建一对一聊天

**
任务清单:

1. 服务端搭建socket.io
2. 客户端具体使用

node.js + express + socket.io 构建 服务端

npm install socket.io // socket.id

const express = require('express');
const app = express();	
const ioServer = app.listen(9527);
const io = require('socket.io').listen(ioServer);
// 连接池
//【注】假设  A的id => A  B的id => B  那么连接池应该是 
// { A: A连接的socket, B: B连接的socket }
// 这个连接池用来干嘛的？ 
// A 想要对 B 发送一些或者接受一些消息 都必须监听 B的socket
let _sockets = null
// 当前用户的socket存放 用于其他js文件使用
let _socket = null
// 客户端连接 处理
io.on('connection', (socket) => {
	_socket = socket
	// 监听的事件名 都是自定义的
	// 接受客户端发来的 用户 id  用来添加到连接池 
	// { data: 'admin' } 这样的数据 admin 是用户的唯一标识
	socket.on('add_socket', (id) => {
		if (id.data == null) return false
		_socket[id.data] = socket
	})
	// 关闭连接
	// { data: 'admin' }  数据结构依旧是这样
	socket.on('close', (_) => {
		// 从连接池删除对应的用户
		delete _sockets[_.data]
	})
})

// 以下是其他的操作 导出 发送 / 监听 方法
let socket = {
  socketOn: (event, callback) => {
    _sockets[uid].on(event, () => {
      callback()
    })
  },
  socketEmit: (uid, event, args) => {
    if (!_sockets[uid]) return false
    _sockets[uid].emit(event, args)
  }
}

module.exports = socket;

vue.js + socket.io 构建 客户端

npm install socket.io // socket.id

// 引入 客户端 对应的包
import io from 'socket.io-client'
let ip = 'ws://182.92.169.234:9527'
let socket = null
Vue.prototype.socketEmit = function (event, args) { socket.emit(event, args) }
Vue.prototype.socketOn = function (event, callback) { socket.on(event, (_) => { callback(_) }) }
Vue.prototype.socketClose = function () { socket.close() }
Vue.prototype.socketDisconnect = function () { socket.disconnect() }
var that = null
//心跳检测
var heartCheck = {
	timeout: 5000, //5s 发一次心跳
	timeoutObj: null,
	reset: function() {
		clearTimeout(this.timeoutObj)
		return this
	},
	start: function() {
		let self = this
		self.reset()
		self.timeoutObj = setTimeout(function() {
			that.socketEmit('res_socket')
			self.start()
		}, this.timeout)
	}
}
export default {
	created () {
		that = this
		// 由于某些情况 所以就简单在这里初始化socket了
      	socket = io('ws://localhost:9527')
      	// 发送 add_socket 告诉服务端 添加我到连接池
      	this.socketEmit('add_socket', {
			data: 'admin' // 这里根据自己需求写
		})
		// 检测心跳
		heartCheck.start()
	},
	methods: {
		// 需要监听 某个用户 例如 aaa
		socketOnFn () {
			let eventId = 'aaa'
			this.socketOn('friend-'+ eventId, (_) => {
				console.log('这是aaa发来的消息', _)
			})
			// 检测心跳
			heartCheck.start()
		}
		// 用户关闭链接
		socketCloseFn () {
			this.socketClose()
		}
	}
}