04_node.js模拟聊天室_nodejs 利用netjs 模仿qq 发送信息和文件-CSDN博客

本文链接：https://blog.csdn.net/qq_37970964/article/details/99655373

创建小型聊天室
项目目录结构

index1.html

       <!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>Document</title>
            <style>
                div {
                    width: 400px;
                    height: 300px;
                    border: 1px solid orange;
                }
            </style>
        </head>
        
        <body>
            <div></div>
            <input type="text" name="inp" id="inp">
            <button>发送</button>
        </body>
        <script src="../socketClient.js"></script>
        <script>
            var sub = document.querySelector("button");
            var msg = document.querySelector("#inp");
            sub.onclick = function () {
                var val = msg.value;
                ws.send(val);
                msg.value = "";
            }
        </script>
        
        </html>

socketClient.js

    	const ws = new WebSocket("ws://10.31.153.18:8080");
        ws.opopen = () => {
            ws.send("aaaaaaaa");
        }
        ws.onmessage = (msg) => {
            var content = document.querySelector("div");
            content.innerHTML += msg.data + "<br/>";
        }

clientServer.js

const express = require("express");
const app = express();
const PORT = 7000;
const HOST = "10.31.153.18";
const path = require("path");

app.use(express.static(path.join(__dirname, "client")));

app.get("/", (req, res, next) => {
    res.send("hello")
})

app.listen(PORT, HOST, () => {
    console.log(`客户端服务器运行在：http://${HOST}:${PORT}`);
})

socketServer.js

const WebSocket = require("ws");

const server = new WebSocket.Server({
    port: 8080,
    host: "10.31.153.18"
})
const clients = {};
let count = 0;
server.on("connection", client => {
    client.name = ++count;
    clients[client.name] = client;
    client.on("message", msg => {
        console.log(msg);
        boardCast(msg);
    });
    client.on("close", () => {
        console.log(`客户端${client.name}下线`);
        delete clients[client.name];
    })
})

function boardCast(msg) {
    for (var key in clients) {
        clients[key].send(`客户端${key}说：${msg}`)
    }
}