Node.js 实现Websocket实时通信小Demo

我会带着你远行 2022-05-26 23:10 225阅读 0赞

一个小Demo模拟实时通信,主要借助socket.io框架实现(对websocket的进一步封装）

1.环境准备：

1） Node.js 环境 –> 官网下载安装即可  
2） socket.io.js文件 –> 同样官网下载 [https://cdnjs.com/libraries/socket.io][https_cdnjs.com_libraries_socket.io]  
3） 按照官网文档指示，安装模块

npm install socket.io

4）编写html和js文件

页面很简陋 ，点击按钮将输入框内容发送到服务端，收到信息显示到下方（不同状态信息不同颜色标识）

<html>
    <head>
        <meta charset="utf-8"/>
        <title>WebSocket</title>
        <script src="socket.io.js"></script>
    </head>
    <body>
        <input type="text" id="sendText">
        <button id="sendBtn">发送</button>
        <div id="recvText"></div>
        <script type="text/javascript"> //建立连接 var socket = io("ws://localhost:3000/"); //发送消息 document.getElementById("sendBtn").onclick = function(){ var sendMsg = document.getElementById("sendText").value; socket.emit('client', sendMsg); } //接收消息 socket.on('enter',function(data){ showMessage(data,'enter'); }); socket.on('server',function(data){ showMessage(data,'server'); }); socket.on('leave',function(data){ showMessage(data,'leave'); }); function showMessage(str,type){ var div = document.createElement('div'); div.innerHTML = str; document.body.appendChild(div); if (type == 'enter') { div.style.color='blue'; }else if (type=='leave') { div.style.color='red'; }; } </script>
    </body>
    </html>

服务端也很简单，分别在连接建立、收到消息和连接关闭时发送客户端数据

//常量定义
    var PORT = 3000
    var clientCount = 0
    
    //监听
    var app = require('http').createServer()
    var io = require('socket.io')(app);
    app.listen(PORT);
    
    io.on('connection', function (socket) { 
        console.log('new connection');
        clientCount++;
        socket.nickName='client'+clientCount;
        io.emit('enter',socket.nickName+' comes in');
    
        socket.on('client',function(data){ 
            io.emit('server',socket.nickName+': '+data);
        });
    
        socket.on('disconnect',function(data){ 
            console.log('disconnection');
                io.emit('leave',socket.nickName+ ' left');
        })
    });
    
    
    
    console.log("Socket.io Start..")

[https_cdnjs.com_libraries_socket.io]: https://cdnjs.com/libraries/socket.io