webSocket聊天室

最新推荐文章于 2024-09-09 09:35:48 发布

^O^所谓

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量125

点赞数

分类专栏：一些操作文章标签： websocket javascript 前端

本文链接：https://blog.csdn.net/weixin_42206375/article/details/128489033

版权

一些操作专栏收录该内容

16 篇文章 0 订阅

订阅专栏

简单的webSocket实践dome

<!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>
</head>

<body>
    <h1>WebSocket 聊天</h1>
    <div id="app">
        <input type="text" id="sendMsg" />
        <button id="submitBtn">send</button>
    </div>
</body>

</html>

<script>

    // 在页面显示聊天内容
    function showMessage(str, type) {
        var div = document.createElement("div");
        div.innerHTML = str
        if (type === 'enter') {
            div.style.color = 'blue';

        } else if (type === 'leave') {
            div.style.color = 'red'
        }
        document.body.appendChild(div)
    }

    // 新建一个websocket
    var websocket = new WebSocket("ws://192.168.1.101:8010");

    // 打开websocket连接
    websocket.onopen = function () {
        console.log("已经连上服务器");
        document.getElementById('submitBtn').onclick = function () {
            var txt = document.getElementById('sendMsg').value;
            if (txt) {
                websocket.send(txt)
            }
        }
    }
    // 关闭连接
    websocket.onclose = function () {
        console.log("websocket close");
    }

    // 接受服务器返回的数据
    websocket.onmessage = function (e) {
        var mes = JSON.parse(e.data)
        showMessage(mes.data, mes.type)
    }
</script>

var ws = require('nodejs-websocket');
var port = 8010;
var user = 0;
console.log(ws, 'wa');
// 创建一个连接
var server = ws.createServer(function (conn) {
    console.log("创建一个新的连接");
    user++;
    conn.nickname = "user" + user;
    conn.fd = "user" + user;
    var mes = {};
    mes.type = "enter";
    mes.data = conn.nickname + '进来了';
    broadcast(JSON.stringify(mes)) // 广播

    // 向客户端推送消息
    conn.on("text", function (str) {
        console.log("回复" + str);
        mes.type = "message";
        mes.data = `${conn.nickname}说：${str}`;
        broadcast(JSON.stringify(mes));
    })

    // 监听关闭连接操作
    conn.on('close', function (code, reason) {
        console.log("关闭连接");
        mes.type = "leave";
        mes.data = `${conn.nickname}离开了`;
        broadcast(JSON.stringify(mes));
    })

    // 错误处理
    conn.on("error", function (err) {
        console.log("监听到错误", err);
    })
}).listen(port, () => {
    console.log("已连接");
})

function broadcast(str) {
    server.connections.forEach(function (connection) {
        connection.sendText(str)
    })
}