前端websocket实现简易聊天室

最新推荐文章于 2024-03-06 11:10:33 发布

中南滴水哥

最新推荐文章于 2024-03-06 11:10:33 发布

阅读量2.6k

点赞数 5

分类专栏： javascript 前端文章标签： websocket javascript 前端

本文链接：https://blog.csdn.net/qq_43742385/article/details/121385990

版权

前端同时被 2 个专栏收录

53 篇文章 2 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

分为客户端和服务端，客户端就是一个简单的html页面，服务端使用node进行编写。具体代码如下

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>websoket</title>
</head>
<body>
    <h1>chat room</h1>
    <input type="text" id="msg" />
    <button id="send">发送</button>
    <script type="text/javascript">
        var websocket = new WebSocket("ws://127.0.0.1:3001/");

        function showMsg(str){
            var div = document.createElement('div');
            div.innerHTML = str;
            document.body.appendChild(div)
        }

        websocket.onopen=function(){
            console.log("open");
            // 用户发送文字
            document.getElementById('send').onclick = function() {
                var txt = document.getElementById('msg').value;
                if (txt) {
                    websocket.send(txt);
                }
            }
        }
        websocket.onclose = function() {
            console.log("close");
        }
        websocket.onmessage = function(e) {
            console.log(e.data);
            showMsg(e.data);
        }
    </script>
</body>
</html>

server.js

var ws = require("nodejs-websocket"). // 引入webSocket模块

var port = 3001;

var clientCount = 0;  // 用来区分不同的用户

var server = ws.createServer(function (conn) {
    console.log("New connection")
    clientCount++  // 新建一个webScoket连接就加一，保证用户名唯一性
    conn.nickname = "user" + clientCount
    // 用户进入，广播给所有的用户
    broadcast("******* "+conn.nickname + " comes in *******");


    conn.on("text", function (str) {
        console.log("Received "+str)
        broadcast(conn.nickname + " say: " + str)
    })  // 用户发送文字，广播给所有的用户


    conn.on("close", function (code, reason) {
        broadcast("******* " + conn.nickname + " left *******");
    }) // 用户离开，广播给所有的用户
    
    conn.on("error", function(err) {
        console.log("error: "+err);
    })
})

// 端口监听
server.listen(port,'0.0.0.0',()=>{
  console.log('websocket服务启动-使用端口',port);
});

console.log("websocket server listening on " + port);

// 遍历所有的连接进行遍历发送文字
function broadcast (str) {
    server.connections.forEach(function (connection) {
        connection.sendText(str)
    })
}

使用方法

创建index.html和server.js文件，在server文件目录下npm init初始化package.json文件，并安装nodejs-websocket

npm install nodejs-websocket --save -D

启动server.js

node server.js

多开几个index.html页面就能体验到效果了
在这里插入图片描述

中南滴水哥

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
前端websocket实现简易聊天室

分为客户端和服务端，客户端就是一个简单的html页面，服务端使用node进行编写。具体代码如下index.html<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>websoket</title></head><body> <h1>chat room</h1> <in.
复制链接

扫一扫