node.js+websocket+html 实现一个特别简单的聊天室

最新推荐文章于 2025-01-11 17:22:56 发布

原创最新推荐文章于 2025-01-11 17:22:56 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #html

本文介绍如何使用Node.js和nodejs-websocket模块创建一个简单的实时聊天室应用。通过HTML、CSS和JavaScript构建前端界面，利用WebSocket实现客户端与服务器的双向通信，支持用户发送和接收消息。

目录结构
在这里插入图片描述
首先新建文件夹，然后确保电脑上有nodejs，然后在文件夹目录运行 npm i node-websocket
使用如下代码：

index.html
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* div {
            height: 200px;
            width: 200px;
            border: 1px solid black;
        } */
    </style>
</head>

<body>
    <input type="text" placeholder="输入信息"><button>发送</button>
    <div></div>

    <script>
        let div = document.querySelector('div');
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        var socket = new WebSocket('ws://localhost:3000')
        // 连接触发
        socket.addEventListener('open', function () {
            div.innerHTML = '连接聊天室成功了'
        })
        // 发送消息
        button.addEventListener('click', function() {
            var value = input.value
            input.value = ''
            socket.send(value)
        })
        // 接收信息
        socket.addEventListener('message', function(e) {
            var dv = document.createElement('div')
            dv.innerHTML = e.data
            div.appendChild(dv)
        })
    </script>
</body>

</html>

serve.js

const ws = require("nodejs-websocket");
let count = 0;
const serve = ws.createServer(conn => {
    console.log('新的连接');
    count++
    conn.userName = `用户${count}号`
    broadcast(`${conn.userName}进入了聊天室`);

    // 接收到了浏览器的数据
    conn.on('text', data => {
        broadcast(`${conn.userName}:` + data)
    })
    // 关闭的时候触发
    conn.on('close', data => {
        console.log('关闭连接');
        broadcast(`${conn.userName}离开了聊天室`);
    })
    // 发生异常 触发
    conn.on('error', data => {
        console.log('发生异常');
    })
})
// 广播信息给所有的用户
function broadcast(msg) {
    serve.connections.forEach(item => {
        item.send(msg)
    })
}


serve.listen(3000, () => {
    console.log('监听端口3000')
})