【基于VUE的实时聊天（私聊）】

对于一个大厅实时聊天我们都看惯不惯了，花了一天的时间结合nodejs-websocket和vue做了一个实时私聊的插件，当然代码方面有待改善。

 现在简要讲解一下我的思路

一、规范传输

我的项目经验不多，但我觉得每个项目都要现设立一些规则，如果随心所欲的可能会导致自己跳到自己的坑。

我们先设定项目的json传输规定

//获取uid {type:'welcome',my_id:'我的uid'} //获取成员 {type:'member',members:['成员1','成员1']} //对话信息 {type:'chat',from:'来自uid',to:'发给uid',msg:'对话信息'}

二、服务器业务逻辑

// npm i nodejs-websocket let ws = require("nodejs-websocket") //str转json let json = str => { return (new Function('return '+str))() } //json转str let str = json =>{ return JSON.stringify(json) } // 实时聊天人数数组，通过随机数生成 let conns = [], message_welcome = {}, message_member = {}, message_between = {}, heart_beat = 9999, //要求每个连接每9999秒心跳一次，否则断线,建议调到50 let server = ws.createServer(function (conn) { //根据时间戳生成用户id uid let uid = str((new Date()).getTime()).slice(-6) //计算心跳时间 conn.heart_time = 0 let timer = setInterval(()=>{ if (conn.heart_time > heart_beat) { clearInterval(timer); conn.close() } conn.heart_time++ },1000) //保存用户id在全局数组conns中方便我们处理聊天对象信息 conns[uid] = conn message_welcome = {'my_id':uid,type:'welcome'} conn.sendText(str(message_welcome)) //如果有新的人员加入，广播数据给全部人 message_member = {'members':Object.keys(conns),type:'member'} for(var i in conns){ conns[i].sendText(str(message_member)) } //接受到发过来的信息 conn.on("text", function (text) { //重置心跳 conn.heart_time = 0 //判断发给谁 console.log(text) let data = json(text), to = data['to'], from = uid, msg = data['msg'] //存在发送的对象 console.log(str(Object.keys(conns)),to) if (Object.keys(conns).indexOf(to) != -1) { message_between = {type:'chat','from':from,'to':to,'msg':msg} console.log(str(message_between)) //发给别人 conns[to].sendText(str(message_between)) //发给自己 conns[from].sendText(str(message_between)) } }) //断开连接的回调 conn.on("close", function (code, reason) { //删除成员信息 delete conns[uid] //广播 message = {'members':Object.keys(conns),type:'member'} for(var i in conns){ conns[i].sendText(str(message_member)) } }) //处理错误事件信息 conn.on('error', function (err) { //异常conn就直接删除 conn.close() delete conns[uid] }) }).listen(8001);//8001端口 

三、vuex管理websocket

因为websocket在项目中通常一个足以。所以直接扔给vuex比较稳。

我没有用onclose判断websocket状态，我改用WebSocket.readyState    (0:正在连接,1:已连接,2:关闭中,3:已关闭)

因为这样的状态更深刻体现webscoket的状态。

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // str转json let json = str => { return (new Function('return '+str))() } //json转str let str = json =>{ return JSON.stringify(json) } export default new Vuex.Store({ state: { WS:false,//websocket对象 WS_URL:'ws://127.0.0.1:8001', WS_RECONNECT:false,//自动重连 // HEART_BEAT:5,//每50秒心跳一次 HEART_MSG:'hello', }, mutations: { SOCKET_INIT(state,config={}){ if (!state.WS) { state.WS = new WebSocket(state.WS_URL) } for(var i in config){ state[i] = config[i] } }, SOCKET_MESSAGE(state,func){ return new Promise((resolve,reject)=>{ state.WS.onmessage=(data)=>{ // data = (new Function('return '+data))() resolve(func(json(data.data))) } //这个有问题，虽然很方便，但还是搁置 // state.WS.addEventListener('message',data=>{resolve(func(data))}) }) }, SOCKET_SEND(msg){ state.WS.send(str(msg)) }, SOCKET_HEART(state){ //设置心跳 if (state.HEART_BEAT > 0) { let timer = setInterval(()=>{ state.WS.send(state.HEART_MSG) //如果已经关闭就停止 if([2,3].indexOf(state.WS.readyState) !== -1){ clearInterval(timer) } },parseInt(state.HEART_BEAT)*1000) } } }, getters:{ }, actions: { SOCKET_INIT({state,commit},func){ return new Promise((resolve,reject)=>{ commit('SOCKET_INIT') state.WS.onerror = function (msg) { reject(msg) } let timer = setInterval(()=>{ //不是正在连接状态 if(state.WS.readyState!==0){ clearInterval(timer) //正在关闭,关闭 if([2,3].indexOf(state.WS.readyState) !== -1){ state.WS = false } //连接 if(state.WS.readyState===1){ resolve(state.WS) commit('SOCKET_HEART') commit('SOCKET_MESSAGE',func) } } },100) }) }, } }) 

四、调用webscoket

import { mapActions,mapState } from 'vuex' export default { name: 'vue-chat', computed:{ //websocket实例 ...mapState({'WS':'WS'}), }, methods:{ ...mapActions({socket:'SOCKET_INIT'}), sendMsg(str){ this.WS.send(str) }, handle_message(data){ //因为我在vuex中直接将其数据变为json，所以直接可以用 console.log(data) } } //一般直接放在加载完成的时候 mounted(){ let that = this //接受信息的时候 this.socket((data)=>{ that.handle_message(data) }) } }

git 代码：https://github.com/JeasonLaung/vue-chat

如果你觉得好，帮我star一个，谢谢大家