利用nodejs和websocket的socket.io做一个简单的聊天室

主体思路：

利用node.js express 搭建服务器生成页面

大概步骤：

初始化文件夹 npm init -y

安装express 和socket.io 两个包： npm i express socket.io

新建server.js 配置服务器，新建index.html 配置页面

预览图

在这里插入图片描述

server.js 代码

// 生成实例app
const app =require('express')()
// 使用app实例生成一个服务器实例
const server =require('http').createServer(app) 
// 引入socket.io
const {Server} =require('socket.io')
const io = new Server(server)

// 访问首页 给index.html
app.get('/', (req,res)=>{
    res.sendFile(__dirname+'/index.html')
})
// websocket 连接
io.on('connection', socket=>{
    console.log('有个MM来了聊天室');
    // 收到聊天信息
    socket.on('chat message' , msg=>{
        console.log(msg);
        // 再把消息广播给客户端
        io.emit('chat message',msg)
    })
    // 断开连接
    socket.on('disconnect',()=>{
        console.log('MM走了');
    })
})
// 监听服务器端口
server.listen('3033',()=>{
    console.log('服务器开启  http://127.0.0.1:3033/');
})

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>简易版聊天室</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">

<body class="p-2">
    <h1 class="p-2">简易版聊天室</h1>
    <form class="input-group mb-3  p-2">
        <input type="text" class="form-control">
        <button class="btn btn-primary btn-lg">发送</button>

    </form>
    <h2>最新消息</h2>
    <ul class="list-group"></ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.6.0/socket.io.js"></script>
    <script>
        const socket = io()
        const form = document.querySelector('form')
        const input = document.querySelector('input')
        const ul = document.querySelector('ul')
        // 给表单绑定提交数据
        form.addEventListener('submit', e => {
            e.preventDefault()
            if (input.value) {
                const date = dayjs().format('MM-DD HH:mm:ss')
                console.log(date);
                // 发输入框的数据发给服务器
                socket.emit('chat message', [input.value, date], )

                // 情况输入框
                input.value = ''
            }
        })
        // 监听服务器广播的消息
        socket.on('chat message', msg => {
            const li = document.createElement('li')
            const span = document.createElement('span')
            li.textContent = msg[0]
            li.className = 'list-group-item text-success'
            span.innerText=msg[1]
            span.classList = 'float-end text-secondary'
            li.appendChild(span)
            ul.prepend(li)
        })
    </script>
</body>

</html>

来源：前端君哥