使用websocket+html+nodejs快速搭建一个建议的在线聊天功能

最新推荐文章于 2023-02-17 12:34:45 发布

Wanliu_233

最新推荐文章于 2023-02-17 12:34:45 发布

阅读量643

点赞数 1

文章标签： websocket html javascript

本文链接：https://blog.csdn.net/wanliu_233/article/details/124668786

版权

1、先新建一个html网页用于展示效果

<!DOCTYPE html>
<html>

<head>
  <style>
    /* #box{
        width: 300px;
        height: 300px;
        border: 1px rgb(158, 158, 158) solid;
      } */
  </style>
</head>

<body>
  <!-- 用于用户输入 -->
  <input type="text" placeholder="请输入" id="ipt">
  <button id="btn">发送请求</button>
  <!-- 聊天框 -->
  <div id="box">

  </div>

  <script>
    //html5自带ws，这里直接创建ws对象，并输入发送地址
    var socket = new WebSocket('ws://localhost:3000')
    //简单的创建三个常量用于分别提示信息，离开信息，普通消息
    const TYPE_ENTER = 0
    const TYPE_LEAVE = 1
    const TYPE_MSG = 2
    //用于测试，是否连上服务器服务端
    socket.addEventListener('open', function () {
      document.getElementById("box").innerText = '服务建立成功'
    })
    //定义发送信息按钮的点击事件
    document.getElementById('btn').addEventListener('click', function () {
     
      //获取输入框中的信息
      var value = document.getElementById('ipt').value
      //调用ws对象发送信息
      socket.send(value);

      document.getElementById('ipt').value = ''
    })
  

    //ws对象的接收信息方法，用于接收服务器发送给浏览器的信息
    socket.addEventListener('message', function (e) {
      var data = JSON.parse(e.data)
      //新建div，用于追加到box中
      var dv = document.createElement('div')
      //拼接一下服务器返回过来的数据，做一些简单的格式处理
      dv.innerText = data.msg + "--" + data.time
      //判断发送出来的信息的类型，用不同的颜色做区分
      if (data.type===TYPE_ENTER){
        dv.style.color='green'
      }
      if (data.type===TYPE_LEAVE){
        dv.style.color='red'
      }
        //把新消息追加到聊天框中，提供给所有人查阅
        document.getElementById("box").appendChild(dv)
    })
  </script>
</body>

</html>

2、使用nodejs搭建一个简单的websocket服务

一、可以在第一步的index.html同级目录下，创建一个新的文件夹，如websocket,然后在websocket文件夹中创建一个app.js文件。如下图：

二、在app.js中编写一个简单的本地websocket服务

先使用 npm install nodejs-websocket 安装依赖

注意：安装的时候建议在websocket文件夹里面安装，这里我使用的vscode，直接使用的vscode自带的终端

const WebSocket = require('nodejs-websocket')//引入刚刚npm下载的依赖
const PORT=3000    //设置监听的端口

//简单的定义一下不同的消息常量
const TYPE_ENTER=0 
const TYPE_LEAVE=1
const TYPE_MSG=2

//记录聊天组人数
var count=0

//创建wb服务
const wss = WebSocket.createServer(connect=>{
//当有人连接成功，人数+1
  count++
//设置新来的用户的，用户名称
  connect.userName=`用户${count}`
//自己在封装的，集体广播/发送信息的方法
//有人连接上了我们的聊天组，自动发消息告诉当前聊天组所有人
//发送一个对象，里面封装了消息类型，具体信息，当前时间
  broadcast({
    type:TYPE_ENTER,
    msg:`${connect.userName}进入了聊天室`,
    time:new Date().toLocaleTimeString()
  })

//ws自己的方法，当接收到用户信息时触发
//这里直接调用集体广播方法，发送给所有人
  connect.on("text",data=>{
    broadcast({
      type:TYPE_MSG,
      msg:data,
      time:new Date().toLocaleTimeString()
    })
  })
//ws自己的方法，当有 用户离开当前聊天组时触发
  connect.on("close",data=>{
   //有人离开，当前人数减一
    count--
//发送消息的逻辑与上面同理
    broadcast({
      type:TYPE_LEAVE,
      msg:`${connect.userName}离开了聊天室`,
      time:new Date().toLocaleTimeString()
    })
  })
//ws自己的方法，简单的处理一下异常
  connect.on("error",data=>{
    console.log('发生异常');
  })
})

//自己封装的全体广播方法，
function broadcast(msg){
  //使用ws中的connections方法获取到当前聊天组的所有用户信息
  //循环发送信息给不同的用户
  wss.connections.forEach(item=>{
  console.log("msg",msg);
    //这里转json因为原生的websocket不支持发送json，所以转一下字符串
    item.send(JSON.stringify(msg))
  })
}

//监听端口
wss.listen(PORT,()=>{
  console.log("服务启动成功");
})

然后使用 node ./app.js启动即可

Wanliu_233

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用websocket+html+nodejs快速搭建一个建议的在线聊天功能

1、先新建一个html网页用于展示效果<!DOCTYPE html><html><head> <style> /* #box{ width: 300px; height: 300px; border: 1px rgb(158, 158, 158) solid; } */ </style></head><body> <!--
复制链接

扫一扫