【基于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一个,谢谢大家

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值