websocket实现多用户一对一实时聊天

已于 2022-07-12 08:44:37 修改
阅读量3.9k 收藏 31
点赞数
文章标签： websocket node.js html
于 2022-07-08 18:08:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/damo_/article/details/125682678
版权

在线聊天模实现

项目是基于node.js服务器搭建的简易双向通信网页，实现了实时更新在线人数以及用户间即时通讯的功能。

1、websocket连接创建

基于后台websocket地址创建简易的连接，并且当websocket断开后自动重新连接。

let lockReconnect = false // 是否允许重新连接
let timeout = 1000 * 20 // 心跳间隔
let reTimeout = 1000 * 10 // 重连间隔
let timeoutTimer = null // 心跳定时器
let reTimeoutTimer = null // 重连定时器
let webSocket = null
let uid = new Date().getTime() // 图方便，将时间戳当作用户id
// 创建websocket连接
function createWebSocket () {
  let webSocket = new WebSocket('ws://localhost:5001/' + uid)
  webSocket.binaryType = 'arraybuffer';
  webSocket.onerror = function () {
    console.log('连接失败...')
    reConnect()
  }
  // websocket收到信息的处理逻辑
  webSocket.onmessage = function (event) {
    if (event.data) {
      let res = JSON.parse(event.data)
      console.log(res)
    }
  }
  webSocket.onclose = function (event) {
    console.log('连接已关闭...')
    console.log('websocket 断开: ' + event.code + ' ' + event.reason + ' ' + event.wasClean)
    reConnect()
  }
}
// 重连
function reConnect () {
  if (lockReconnect) {
    return
  }
  lockReconnect = true
  // 没连接上会一直重连，设置延迟避免请求过多
  reTimeoutTimer && clearTimeout(reTimeoutTimer)
  reTimeoutTimer = setTimeout(function () {
    createWebSocket()
    lockReconnect = false
  }, reTimeout)
}

2、基于websocket动态获取在线用户

想要实现实时获取在线用户列表，并且有用户连接上wesocket服务时，通知给其他在线用户。
服务器端

// 存储在线用户
let onlineUser = []
wss.on('connection', (ws, req, res) => {
// 获取当前连接websocket的用户uid
  let uid = req.url.substr(1)
  let index = onlineUser.findIndex(val => val.id === uid)
  if (index !== -1) {
    onlineUser[index].websocket = ws
  } else {
    onlineUser.push({
      websocket: ws,
      id: uid
    })

  }
  // 获取在线用户id数组
  let User = JSON.stringify({
    onlineUser: onlineUser.map(val => val.id),
    type: 'users'
  })
  // 通知所有在线用户有新用户上线
  onlineUser.forEach((client) => client.websocket.send(User))
})

用户端

// websocket收到信息的处理逻辑
    webSocket.onmessage = function (event) {
      if (event.data) {
        let res = JSON.parse(event.data)
        console.log(res)
        switch (res.type) {
          // 当消息为用户列表
          case 'users':
            userList.innerHTML = res.onlineUser.map(val => {
              if (val == uid) {
                return '<li>me:' + val + '</li>'
              } else {
                return '<li>' + val + '</li>'
              }
            }).join('')
            break
          default:
        }
      }
    }

3、基于ajax+websocket获取与某个用户的聊天信息

服务器端收到用户发送给另一个用户的消息后，遍历在线用户列表并匹配到接收消息的用户，将消息发送给所匹配到的用户。

ws.on('message', (msg) => {
    // 将收到的消息转成对象格式
    const buf = Buffer.from(msg)
    let notice = buf.toString('utf-8')
    let Notice = JSON.parse(notice)

    // 通知当前用户消息发送成功
    ws.send(JSON.stringify({
      msg: Notice.msg,
      type: 'chat'
    }))
    // 存储当前用户发送的数据
    chatInfo.push({
      from: uid,
      to: Notice.receiver,
      msg: Notice.msg
    })
    // 根据receiver匹配到接收消息的用户并发送通知
    onlineUser.forEach(function each(client) {
      if (client.id === Notice.receiver) {
        if (client.websocket.readyState === 1) {
          client.websocket.send(JSON.stringify({
            msg: Notice.msg,
            type: 'chat'
          }));
        }
      }
    });
  })

用户端，当接收到消息或者信息发送成功时，刷新聊天界面，重新请求聊天信息。

// websocket收到信息的处理逻辑
    webSocket.onmessage = function (event) {
      if (event.data) {
        let res = JSON.parse(event.data)
        console.log(res)
        switch (res.type) {
          // 当消息为用户列表
          case 'users':
            userList.innerHTML = res.onlineUser.map(val => {
              if (val == uid) {
                return '<li>me:' + val + '</li>'
              } else {
                return '<li>' + val + '</li>'
              }
            }).join('')
            break
          // 当消息为聊天信息，刷新聊天框
          case 'chat':
            if (chatBoxId) {
              reloadChatInfo()
            }
            break
          default:
        }
      }
    }
   // 根据当前聊天用户重新获取聊天信息
  function reloadChatInfo() {
    getDataMethod('get', 'http://localhost:8191/getchat', {
      friendId: chatBoxId,
      id: uid
    }).then(res => {
      let chatlist = JSON.parse(res)
      chatcontent.innerHTML = chatlist.map(val => {
        if (val.from == uid) {
          return '<p class="me">' + val.msg + ':me</p>'
        } else {
          return `<p class="other">${val.from}:${val.msg}</p>`
        }
      }).join('')
    })
  }
  // 获取聊天信息的ajax请求
  function getDataMethod(method, url, params) {
    if (params) {
      let arr = []
      for (let key in params) {
        arr.push(key + '=' + params[key])
      }
      url = url + '?' + arr.join('&')
    }
    return new Promise((resolve, reject) => {
      let xml = new XMLHttpRequest()
      xml.open(method, url, false)
      xml.onreadystatechange = function () {
          if (xml.readyState == 4){
            console.log(xml)
            if (xml.status == 200) {
              resolve(xml.response)
            } else {
              reject(new Error(xml.statusText))
            }
            
          }
      }
      xml.send()
    })
  }

Node.JS服务器代码


// 导入 express
const express = require('express')
// 创建服务器的实例对象
const app = express()

const WebSocket = require('ws')

// 存储聊天信息
let chatInfo = []
// 存储在线用户
let onlineUser = []
const wss = new WebSocket.Server({ port: 5001 })
// 建立websocket连接
wss.on('connection', (ws, req, res) => {
  console.log('server connection')
  // 获取当前连接websocket的用户uid
  let uid = req.url.substr(1)
  let index = onlineUser.findIndex(val => val.id === uid)
  if (index !== -1) {
    onlineUser[index].websocket = ws
  } else {
    onlineUser.push({
      websocket: ws,
      id: uid
    })

  }
  // 获取在线用户id数组
  let User = JSON.stringify({
    onlineUser: onlineUser.map(val => val.id),
    type: 'users'
  })
  // 通知所有在线用户有新用户上线
  onlineUser.forEach((client) => client.websocket.send(User))
  ws.on('message', (msg) => {
    // 将收到的消息转成对象格式
    const buf = Buffer.from(msg)
    let notice = buf.toString('utf-8')
    let Notice = JSON.parse(notice)

    // 通知当前用户消息发送成功
    ws.send(JSON.stringify({
      msg: Notice.msg,
      type: 'chat'
    }))
    // 存储当前用户发送的数据
    chatInfo.push({
      from: uid,
      to: Notice.receiver,
      msg: Notice.msg
    })
    // 根据receiver匹配到接收消息的用户并发送通知
    onlineUser.forEach(function each(client) {
      if (client.id === Notice.receiver) {
        if (client.websocket.readyState === 1) {
          client.websocket.send(JSON.stringify({
            msg: Notice.msg,
            type: 'chat'
          }));
        }
      }
    });
  })
  // 连接关闭后清除在线用户
  ws.on('close', res => {
    let newUserArr = []
    let newUserIds = []
    for (let i = 0; i < onlineUser.length; i++) {
      let val = onlineUser[i]
      if (val.id !== uid) {
        newUserArr.push(val)
        newUserIds.push(val.id)
      }
    }
    onlineUser = newUserArr
    let User = JSON.stringify({
      onlineUser: newUserIds,
      type: 'users'
    })
    onlineUser.forEach((client) => client.websocket.send(User))
  })

  ws.send(JSON.stringify({
    msg: '连接已建立',
    type: 'system'
  }))
})


//3.创建一个路由对象
let router = express.Router();

//4.设置路由
router.get('/getchat',(req,res)=>{
  let fromid = req.query.id
  let toid = req.query.friendId
  // 返回当前用户与消息接收用户的聊天记录
  let msgList = chatInfo.filter(val => (val.from === fromid && val.to === toid) || (val.from === toid && val.to === fromid))
  res.send(msgList);
})

// 配置跨域请求中间件
const cors = require('cors')
app.use(cors())
app.use(router);


app.listen(8191, () => {
  console.log('running')
})

html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
  <meta http-equiv="Access-Control-Allow-Origin" content="*" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content{
      display: flex;
    }
    .leftbox{
      width: 250px;
    }
    #rightbox{
      width: 500px;
      height: 500px;
      background-color: black;
      color: white;
    }
    #rightbox #chatcontent{
      width: 100%;
      height: 370px;
      overflow: auto;
    }
    #rightbox #inputchat {
      width: 100%;
      height: 100px;
      box-sizing: border-box;
    }
    #chatcontent .me{
      text-align: right;
    }
    #chatcontent .other{
      text-align: left;
    }
    #title{
      height: 30px;
    }
  </style>
</head>
<body>
  <button id="connectws">连接websocket</button>
  <div class="content">
    <div class="leftbox">
      <p>在线用户：</p>
      <ul id="userList">
      </ul>
    </div>
    <div id="rightbox">
      <div id="title"></div>
      <div id="chatcontent">

      </div>
      <input type="text" name="" id="inputchat">
    </div>
  </div>

</body>
<script>
  let lockReconnect = false // 是否允许重新连接
  let timeout = 1000 * 20 // 心跳间隔
  let reTimeout = 1000 * 10 // 重连间隔
  let timeoutTimer = null // 心跳定时器
  let reTimeoutTimer = null // 重连定时器
  let webSocket = null
  let uid = new Date().getTime()
  let chatBoxId = ''
  // 创建websocket连接
  function createWebSocket () {
    let 
    webSocket = new WebSocket('ws://localhost:5001/' + uid)
    webSocket.binaryType = 'arraybuffer';
    webSocket.onopen = function () {
      console.log('连接成功...')
      // 监听回车发送消息事件
      window.onkeypress = function(e) {
        if (e.keyCode === 13) {
          let msg = inputchat.value
          console.log(msg)
          if (chatBoxId && msg !== '') {
            webSocket.send(JSON.stringify({
              receiver: chatBoxId,
              msg: msg,
            }))
            inputchat.value = ''
          }
        }
      }
    }
    webSocket.onerror = function () {
      console.log('连接失败...')
      reConnect()
    }
    // websocket收到信息的处理逻辑
    webSocket.onmessage = function (event) {
      if (event.data) {
        let res = JSON.parse(event.data)
        console.log(res)
        switch (res.type) {
          // 当消息为用户列表
          case 'users':
            userList.innerHTML = res.onlineUser.map(val => {
              if (val == uid) {
                return '<li>me:' + val + '</li>'
              } else {
                return '<li>' + val + '</li>'
              }
            }).join('')
            break
          // 当消息为聊天信息
          case 'chat':
            if (chatBoxId) {
              reloadChatInfo()
            }
            break
          default:
        }
      }
    }
    webSocket.onclose = function (event) {
      console.log('连接已关闭...')
      console.log('websocket 断开: ' + event.code + ' ' + event.reason + ' ' + event.wasClean)
      reConnect()
    }
  }
  // 重连
  function reConnect () {
    if (lockReconnect) {
      return
    }
    lockReconnect = true
    // 没连接上会一直重连，设置延迟避免请求过多
    reTimeoutTimer && clearTimeout(reTimeoutTimer)
    reTimeoutTimer = setTimeout(function () {
      createWebSocket()
      lockReconnect = false
    }, reTimeout)
  }

  // 获取页面元素
  let btnws = document.getElementById('connectws')
  let title = document.getElementById('title')
  let inputchat = document.getElementById('inputchat')
  let chatcontent = document.getElementById('chatcontent')
  let userList = document.getElementById('userList')


  btnws.addEventListener('click', () => {
    createWebSocket()
  })
  // 监听在线用户点击事件
  userList.addEventListener('click', (e) => {
    if (!e.target.innerText.includes('me')) {
      chatBoxId = e.target.innerText
      title.innerHTML = '与' + chatBoxId + '的聊天'
      reloadChatInfo()
    }
  })
  // 根据当前聊天用户重新获取聊天信息
  function reloadChatInfo() {
    getDataMethod('get', 'http://localhost:8191/getchat', {
      friendId: chatBoxId,
      id: uid
    }).then(res => {
      let chatlist = JSON.parse(res)
      chatcontent.innerHTML = chatlist.map(val => {
        if (val.from == uid) {
          return '<p class="me">' + val.msg + ':me</p>'
        } else {
          return `<p class="other">${val.from}:${val.msg}</p>`
        }
      }).join('')
    })
  }
  // 获取聊天信息的ajax请求
  function getDataMethod(method, url, params) {
    if (params) {
      let arr = []
      for (let key in params) {
        arr.push(key + '=' + params[key])
      }
      url = url + '?' + arr.join('&')
    }
    return new Promise((resolve, reject) => {
      let xml = new XMLHttpRequest()
      xml.open(method, url, false)
      xml.onreadystatechange = function () {
          if (xml.readyState == 4){
            console.log(xml)
            if (xml.status == 200) {
              resolve(xml.response)
            } else {
              reject(new Error(xml.statusText))
            }
            
          }
      }
      xml.send()
    })
  }
  
</script>
</html>
damo_
关注
  • 0
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
websocket实现即时聊天
sundaysunshine的博客
12-01 1419
websocket的简单实现即时聊天 看了很多人写的关于websocket的简单实现即时聊天（点对点+广播方式），鼓起勇气就想自己也写一个，虽然只是实现了简单的文字传送。当然特别感谢DyncRole大神的博客给了我许多的启发。嗯嗯，不太会说话，直接谈细节。 首先websocket协议几个关键部分就是分别对应到： 1）服务器与客户端建立连接 2)服务器与客户端建立连接成功后干什么
WebSocket开发（一对一聊天）功能
AnNanDu的博客
08-22 2602
从0开始基于WebSocket建立easy-chatroom，本篇为websocket实现一对一私聊和统计在线人数等功能。下面代码都是基于上篇文章中的代码进行的修改，开始的步骤中为了一步步的循环渐进所以只展示修改部分的代码，如果有感觉不连贯的同学可以完成上篇文章后再按本篇步骤执行，完整代码会在最后贴出。
webSocket+Node+Js实现在线聊天（包含所有代码）
最新发布
见贤思齐焉，见不贤内自省
05-24 956
webSocket+Node+Js实现在线聊天（包含所有代码）
WebSocket实现不同用户之间消息传递、离线消息暂存、上线消息推送、前后端怎么处理、注入Bean、测试类报IllegalStateException
qq_43657722的博客
11-04 2527
WebSocket实现不同用户之间消息传递、离线消息暂存、上线消息推送、前后端怎么处理、注入Bean、测试类报IllegalStateException
【python flask】给多个webocket客户端推送信息
ChaoChao66666的博客
03-06 1179
【python flask】给多个webocket客户端推送信息
基于WebSockets实现在线聊天平台
2401_82778412的博客
02-25 372
发送
WebSoket一对多聊天（仅供参考）
weixin_46141446的博客
03-14 773
上面的频道我用于存游客id，因为我是一对多所以我要单独维护我的id，接下来就是Soket类。这个代码是为了防止我忘记使用的，谨慎使用。接下来是页面代码，这是我的页面。
PHP用swoole+websocket和redis实现web一对一聊天
10-16
通过以上步骤，我们可以构建一个基本的一对一聊天系统，利用Swoole的高并发性能和WebSocket的实时通信特性，以及Redis和MySQL的数据存储能力，实现了用户之间的即时消息传递。注意，在实际应用中，还需要考虑错误...
springboot+netty 实现简单的一对一聊天
04-24
在本文中，我们将深入探讨如何使用Spring Boot和Netty实现一个简单的一对一聊天应用程序。Spring Boot是Java领域中广泛使用的微服务框架，它简化了配置并提供了快速启动的应用程序开发体验。Netty则是一个高性能、...
WebSocket实现简单客服聊天系统
08-30
客服聊天系统需要满足多客服、客服一对多用户的需求。我们可以使用WebSocket来实现客服聊天系统，满足电商系统中的客服聊天需求。 知识点6：server.js文件的编写 在实现客服聊天系统时，我们需要编写server.js文件...
webChat使用websocket实现网页多人聊天
07-03
总结，"webChat"项目是一个基于WebSocket实现的网页多人聊天应用，通过WebSocket的全双工特性，实现了高效、实时的聊天功能。了解并掌握WebSocket的基本原理和API，以及如何在客户端和服务器端进行相应的编程，是...
websocket 即时通讯案例 ，一对一聊天，多人聊天 java 版本
03-07
websocket 即时通讯案例 ，一对一聊天，多人聊天 java 版本
springWebSocket 一对一在线聊天
10-20
1.文件用maven的方式导入到MyEcplise 直接运行Application里面的mian函数 2.然后用cmd的命令ipconfig 查看本地id 3.localhost://8080/index2.html/UID=3（localhost 换成本地ip,UID 用来模拟当前用户的id） 4.多台电脑访问吧
SpringBoot WebSocket消息推送（群发和指定到个人或多人）
10-11
SpringBoot WebSocket消息推送（群发和指定到个人或多人）,导入项目可以直接运行。
java websocket实现视频聊天
09-27
Java WebSocket 实现视频聊天是一种在Web上实现实时通信的技术，它允许服务器和客户端之间建立持久的连接，以便数据可以在两个方向上同时传输，而无需为每个消息创建新的HTTP请求。在本项目中，Java WebSocket被用来...
Springboot + websocket 实现 一对一 单人聊天
射手座的程序媛的专栏
01-14 953
websocket 简单聊天
WebSocket多人聊天室
不想头秃QAQ的博客
03-12 6635
项目背景   现在的年轻人，大多都有“社交恐惧症”，但其实随着通信技术的日益发展，网络聊天在当今已不算新鲜事物，聊天可以方便大家交流，帮助大家克服“社恐”。以此为契机，我仿照QQ开发了一款 WebSocket多人聊天室 ，以供同一局域网下多名小伙伴相互聊天，增进彼此感情，共同战胜“社恐”。 实现功能 本聊天室具有以下功能：   1） 简单的注册登录功能   2） 用户发送消息，所有在线用户都能收到消息   3） 不在线用户在上线后能收到历史消息（第一次注册用户不会收到历史消息）   4） 右侧动态的显示
WebSocket通信，多客户端数据同时发送
weixin_42228937的博客
08-26 3854
<div> <input type="button" value="发送数据" onclick="send('黎明')"/> <input type="button" value="关闭连接" onclick="onClose()"/> <div id="ht" style="font-size: 15px;"></div> </div> <script type="text/javascript"> .
用Java帮我写一个用websocket实现的一对一好友聊天项目
05-11
好的，下面是一个简单的用Java实现的一对一好友聊天项目，使用了WebSocket协议。 首先，我们需要引入Java WebSocket API库，可以从Maven仓库中获取。 pom.xml文件内容如下： ```xml <groupId>javax.websocket...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值