nodejs-websocket简单实现多人聊天

最新推荐文章于 2024-05-24 20:50:02 发布

大青花鱼の

最新推荐文章于 2024-05-24 20:50:02 发布

阅读量800

点赞数 2

分类专栏： websocket 文章标签： websocket node.js

本文链接：https://blog.csdn.net/halations/article/details/120460406

版权

websocket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文件目录如下：

使用nodemon热更新启动server.js

目的是在局域网内能访问到聊天界面

nodemon server.js

代码如下

const Koa = require('koa')
const path = require('path')
const static = require('koa-static')
const Router = require('koa-router')

let router = new Router()
const app = new Koa()

const staticPath = './static'

app.use(static(
  path.join( __dirname,  staticPath)
))

app
  .use(router.routes())
  .use(router.allowedMethods()); 


app.listen(6677)

使用nodemon热更新启动websocket.js

启动websocket服务

nodemon websocket.js

代码如下

const ws = require('nodejs-websocket');
const PORT = 6678

const arr = []
const server = ws.createServer(connect => {
    const useId = new Date().getTime()
    connect.userName = `用户${useId}`;
    arr.push({
        userName:connect.userName,
        value: '加入聊天室',
        connect,
    })
    broadcast(arr)
    
    connect.on('text', data => {
        const params = {
            connect,
            userName:connect.userName,
            value: data,
        }
        arr.push(params)
        broadcast(arr)
    });

    //连接关闭触发close事件
    connect.on('close',()=>{
        arr.push({
            userName:connect.userName,
            value: '离开了聊天室',
        })
    });

    //注册error事件,用户端口后就会触发该异常
    connect.on('error',()=>{
        console.log('用户连接异常');
    });
});

const broadcast = (arr) => {
    const params = arr.map(({userName,value})=>({
        userName,
        value
    }))
    server.connections.forEach(item => {
        item.send(JSON.stringify(params));
    });
}

server.listen(PORT);

连同一wifi下，所有人访问这个地址进入聊天

http://ip:6677/index.html

index.html 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
    .bodys{
        width: 400px;
        margin: 0 auto;
    }
   #content {
        width: 400px;
        height: 600px;
        border: 1px solid #000;
        overflow-y: scroll;
    }
</style>
<body>
    <div class="bodys">
        <div id="content"></div>
        <input id="xiaoming" placeholder="请输入" />
        <button id="submit">发送</button>
    </div>
</body>
<script>
  let input = document.getElementById('xiaoming');
  let button = document.getElementById('submit');
  let div = document.getElementById('content');
  //创建WebSocket('WebSocket服务器地址')
//下一行的ip修改一下
  let socket = new WebSocket('ws://ip:6678/');
//   let socket = new WebSocket('ws://localhost:6678/');
  //监听WebSocket事件 open和WebSocket服务器连接成功触发
  socket.addEventListener('open',()=>{
    console.log('连接成功')
  });
  input.addEventListener('keydown',(e)=>{
    if(e.keyCode===13){
        let value = input.value;
        input.value = ''
        socket.send(value);
    }
  })

  //给webSocket发送消息
  button.addEventListener('click',()=>{
      let value = input.value;
      input.value = ''
      socket.send(value);
  });

  //接受websocket服务的消息
  socket.addEventListener('message',(msg)=>{
      const data = JSON.parse(msg.data)
        let str = ''
        data.forEach(item=>{
            str+=`<div>${item.userName}:${item.value}</div>`
        })
      //把消息显示到div
      div.innerHTML = str
      div.scrollTop = div.scrollHeight;
  });
  //端口服务
  socket.addEventListener('close',()=>{
      console.log('服务断开');
  });
</script>

</html>

注意IP的修改

大青花鱼の

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
nodejs-websocket简单实现多人聊天

文件目录如下：使用nodemon热更新启动server.js目的是在局域网内能访问到聊天界面nodemon server.js代码如下const Koa = require('koa')const path = require('path')const static = require('koa-static')const Router = require('koa-router')let router = new Router()const app = ...
复制链接

扫一扫

专栏目录