基于nodeJs的websocket模块实现即时通信

服务器端 socket 功能
1、创建服务器绑定 IP + 端口监听端口
2、监听客户端的链接
3、监听客户端发来的消息
4、把来自客户端的消息广播给其他的在线客户端
5、监听客户端的关闭

客户端 socket 功能
1、创建客户端 socket
2、连接服务器的 socket
3、发送消息给服务器
4、接收服务器发来的消息
5、监听服务器关闭或者异常

前端代码实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <title>聊天室</title>
    <style>
        .box{
            box-sizing: border-box;
            width: 400px;
            height: 300px;
            margin: 0 auto;
        }
        #recv{
            box-sizing: border-box;
            width: 100%;
            height: 500px;
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow-y: auto;
            padding: 10px;
        }
        p{
          margin: 0;
          padding: 2px 0;  
        }
        input{
            width: 200px;
            height: 30px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            outline: none;
            border-radius: 5px;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <%- include("head")%>
    <div class="box">
        <h1>聊天室</h1>
        <div id="recv"></div>
        <input type="text" name="" id="texts">
        <button id="send" data-name="<%-username%>">发送</button>
    </div>

    <script>
        var inp = document.querySelector("#texts");
        var btn = document.querySelector("#send");
        var recv = document.querySelector("#recv");

        var websocket = new WebSocket("ws:192.168.53.210:10086");
        var usernsme = btn.getAttribute("data-name")
        websocket.onopen = function () {
            websocket.send(JSON.stringify({
                    user:usernsme,
                    txt: "我上线了",
                }));
            btn.onclick = function(){    
                if(!inp.value) return;
                websocket.send(JSON.stringify({
                    user:usernsme,
                    txt: inp.value,
                }));
                
                inp.value = '';
            }
        }
        websocket.onmessage = function (e) {
            console.log(e.data)
            recv.innerHTML += `<p>${JSON.parse(e.data).user}说：${JSON.parse(e.data).txt}</p>` ;
            recv.scrollTop += recv.clientHeight;
        }
        websocket.onclose = function () {
            console.log("websocket close");
        }

    </script>
</body>

</html>

服务器端代码：

var ws = require("ws");
var port = 10086;
const socket = ws.Server;

const webServer = new socket({ port });

console.log(`server start in ${port}`);
var userObjobj = {};

var count = 100;
var info = "WUHAN2002__";
var userObj = {};

webServer.on("connection", (socket) => {
    count++;
    var obj = {}
    socket.name = info+count;  // 后面删除 
    userObj[socket.name] =  socket;  //每登录都会存一个数据到 userObj   
    // 监听客户端发来的消息... 
    socket.on("message", (msg) => {
        // socket.send(msg);
        obj = {
            user:JSON.parse(msg).user,
            txt:JSON.parse(msg).txt,
        }
        boradcast(JSON.stringify(obj), socket);
    });

    // 监听客户端的关闭 socket 
    socket.on("close", function () {
        obj.txt = "下线了"
        boradcast(JSON.stringify(obj));
        delete userObj[socket.name];   // 对象删除
    })
});

// 广播
function boradcast(msg,socket){
    for(var prop in userObj){
        userObj[prop].send(msg);
    }
}

基于nodeJs的websocket模块实现即时通信

猜你喜欢