利用H5的webSocket写聊天室效果

最新推荐文章于 2025-06-16 15:34:34 发布

zhaoxiaozhun

最新推荐文章于 2025-06-16 15:34:34 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_44643273/article/details/90381864

node.js 专栏收录该内容

4 篇文章

订阅专栏

首先要安装ws和express插件

{
  "dependencies": {
    "express": "^4.17.0",
    "ws": "^7.0.0"
  }
}

写聊天室结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket</title>

</head>

<body>
    <h1> 聊天室 </h1>
    <div id="content" name="name" style="overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000"></div>
    <br />
    <div>
        <input type="text" id="msg" style="width: 200px;">
    </div>
    <button id="submit">提交</button>
    <script src="./wsClient.js"></script>
    <script>
        document.querySelector('#submit').addEventListener('click', function() {
            var msg2 = msg.value
            ws.send(msg2)
            msg.value = ''
        }, false)
    </script>
</body>

</html>

连接服务器js代码

/* 
  连接服务器

*/
const wsPort = 8010
const hostname = '10.31.163.80'
const ws = new WebSocket(`ws://${ hostname }:${ wsPort }`)

ws.onopen = () => {
    // 进入聊天室的提示
    ws.send('欢迎xxx来到xxx的直播间')
}

// 接收数据，然后将数据展示到界面上
ws.onmessage = (msg) => {
    const content = document.querySelector('#content')
    content.innerHTML += msg.data + '<br/>'
}

// 异常报出

// ws.onerror = ( 'error' ) => {
//   console.log( error )
// }


ws.onclose = () => {
    console.log('closed')
}

客户端配置静态服务器

//给client启动一个静态服务器，用于展示页面
const express = require("express")
const path = require("path")
const webPort = 4000
const hostname = "10.31.163.80"
const app = express()
app.use(express.static(path.join(__dirname, "client")))
app.listen(webPort, hostname, () => {
    console.log(`The web server is running at:http://${hostname}:${webPort}`)
})

服务端配置服务器

//安装ws模块来创建服务器 
const WebSocket = require("ws");
const ws = new WebSocket.Server({ port: 8010, host: "10.31.163.80" });
let clients = {};
let clientName = 0;
ws.on("connection", (client) => {
    client.name = ++clientName
    clients[client.name] = client
    client.on("message", (msg) => {
        console.log(msg) //客户端接受到的信息
        Broadcast(client, msg)
    })
    client.on("close", () => {
        delete clients[client.name]
        console.log(client.name + "离开了~~~")
    })
})

function Broadcast(client, msg) {
    for (var key in clients) {
        clients[key].send(client.name + "说：" + msg)
    }
}

好啦，先运行服务器端js,再运行客户端服务器js,在浏览器输入IP和端口号输入文字，就可以看到效果哦，为了效果更好可以多开几个窗口哦