vue+websokect实现实时聊天,可单聊、可群聊

05-14 1376阅读

效果图

vue+websokect实现实时聊天,可单聊、可群聊

效果网站链接,安全性不符合实际上线使用,仅供学习交流

https://livequeen.top 

效果小程序二维码 (需现在web端获取账号)

vue+websokect实现实时聊天,可单聊、可群聊

vue+websokect实现实时聊天,可单聊、可群聊        vue+websokect实现实时聊天,可单聊、可群聊 

思路

 一个实时聊天功能

第一,肯定要能够实现单聊或者群聊,所以不能无差别广播,要实现向指定用户发送广播。

第二,区分在线和离线,所以必须实现聊天信息要能保存到MYSQL数据库,即便离线,也能再次上线时收到消息。

第一步

一个实时聊天的功能,其核心就是websokect,进行双向平等对话,从后端主动推送消息到前端,实现实时推送消息的功能。关于websokect相关介绍,就不过多介绍,都能百度到,我这里推荐两个:

阮一峰老师的一篇文章

MDN文档

 第二步

写后端核心代码,这里用的是Node.js的express框架。

ps:如果需要用java做后端的,可以看看我的这个帖子,链接如下:Springboot实现websocket(连接前jwt验证token)_springboot整合websocket好友聊天如何实现 token的方式-CSDN博客

注释解析:conn是用户的连接信息,在用户连接上ws端口时,将用户id信息发送过来,并以其id为key存储conn连接信息,用于指定用户发送广播,实现单聊或指定群聊,而broadcast()就是我们写的指定用户实现单聊的广播的方法。

let conns2 = {}// 实时聊天用户连接属性集
// websocket实时聊天
const wss2 = new WebSocket.Server({ port: 8082 })
wss2.on('connection', function connection (ws, req) {
  // 获取传递来的参数,req.url为端口号后的地址,需要处理只留下参数
  let index = req.url.indexOf('=')
  let id = req.url.substr(index + 1, req.url.length)
  console.log('成功连接实时聊天,用户:' + id)
  // 储存用户连接属性,用于识别发送对象
  conns2[id] = ws
  // 收到前端传来的消息
  ws.on('message', function incoming (message) {
    const obj = JSON.parse(message)
    // 广播给前端
    broadcast(obj)
  })
  // 关闭
  ws.on('close', function (e) {
    console.log(e, '服务端连接关闭')
  })
  // 错误
  ws.on('error', function (e) {
    console.log(e, '服务端异常')
  })
})

 forEach遍历循环,利用typeof判断conns已连接用户集合(在线集合)中是否有该用户,来判断是否在线,然后使用sendText()发送消息。

// 实时聊天发送消息处理
function broadcast (obj) {
  // 储存需要广播的对象id
  let users = []
  // 判断是否为群聊,1为否,2为是
  if (obj.type === '1') {
    users.push(obj.send_id)
    users.push(obj.accept_id)
  } else if (obj.type === '2') {
    users = obj.accept_group
  }
  // 判断是否存在发送对象
  if (users && users.length) {
    users.forEach(item => {
      // 判断是否’正在连接中‘是否有该用户
      if (typeof conns2[item] === 'undefined') {
        console.log(item + '---该用户已离线')
      } else {
        // 发送消息给前端
        conns2[item].send(JSON.stringify(obj))
      }
    })
  }
}

 第三步

写前端样式,这里用的是vue框架

  
  
    
    
      
      
        
        {{userName}}
      
      
      
        
          
          
            {{item.name}}
            

[{{messlst[item.id][messlst[item.id].length-1].send_name}}]{{messlst[item.id][messlst[item.id].length-1].content}}

暂无消息

{{acceptUser}} {{item.send_name}} {{item.send_date}}

{{item.content}}

{{item.send_date}} {{item.send_name}}

{{item.content}}

发送 暂无消息,请选择用户对象

CSS样式

.mess{
  border-radius: 5px;
  background-clip: padding-box;
  margin:20px auto;
  width: 950px;
  height: 600px;
  border: 1px #8a8282;
  box-shadow: 0 0 10px #9b9393;
  background-color: white;
  display: flex;
}
.mess_user_list{
  width: 270px;
  height: 100%;
  background-color: #9f9c9c;
}
.mess_dialog{
  width: 680px;
  height: 600px;
}
.mess_dialog_false{
  width: 680px;
  height: 600px;
  text-align: center;
  line-height: 600px;
}
.dlog_header{
  width: 680px;
  height: 50px;
  border-bottom: 1px solid #8a8282;
  display: flex;
  align-items: center;
}
.dlog_content{
  width: 680px;
  height: 370px;
  border-bottom: 1px solid #8a8282;
  overflow-y: scroll;
}
.dlog_footer{
  width: 680px;
  height: 180px;
}
.user{
  height: 60px;
  width: 270px;
  /*垂直居中*/
  display: flex;
  align-items: center;
  border-bottom: 1px solid #0a0a0a;
}
.user_list{
  height: 540px;
  overflow-y: scroll;
}
.user_list_item{
  height: 60px;
  background-color: #b3b3b4;
  border-bottom: 1px solid #0a0a0a;
  display: flex;
  align-items: center;
}
.content_other{
  width: 650px;
}
.content_me{
  width: 650px;
  text-align: right;
}

第四步

前端js代码,连接后端ws端口,监听ws的四个状态,并各种绑定事件:

open-连接成功

close-连接关闭

error-连接错误

message-收到后端传来的消息

const ws = new WebSocket('ws://localhost:8082?id=' + id)
mounted () {
    ws.addEventListener('open', this.handleWsOpen.bind(this), false)
    ws.addEventListener('close', this.handleWsClose.bind(this), false)
    ws.addEventListener('error', this.handleWsError.bind(this), false)
    ws.addEventListener('message', this.handleWsMessage.bind(this), false)
  },
methods: {
    handleWsOpen () {
      console.log('WebSocket2已经打开 ')
    },
    handleWsClose (e) {
      console.log('WebSocket2关闭')
      console.log(e)
    },
    handleWsError (e) {
      console.log('WebSocket2发生错误')
      console.log(e)
    },
    handleWsMessage (e) {
      console.log('WebSocket2收到消息:' + e.data)
    }
}

在连接成功ws后端端口后,前端就可以使用ws.send()发送消息给后端,同时存储消息于mysql,然后后端处理完成后,再按需发送给需要发送的前端对象即可。

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]