nodejs 使用socket.io与网页实时数据交互

谁践踏了优雅 2022-07-29 09:25 130阅读 0赞

首先我们需要安装socket模块

安装命令: npm install socket.io

编辑前台页面:index.html

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>统计在线人数</title>
        <script src="http://localhost:3000/socket.io/socket.io.js"></script>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
            // 创建websocket连接
            var socket = io.connect('http://localhost:3000');
            // 把信息显示到div上
            socket.on('onlinenums', function (data) {
    
                    $("#nums").html(data.nums);
            });
        </script>
    </head>
    <body>
    
        当前在线人数:<span style="color: red;" id="nums">0</span>
    
    
    </body>
    </html>

服务端的:index.js

##### volatile 意思大概是说，当服务器发送数据时，客户端因为各种原因不能正常接收，比如网络问题、或者正处于长连接的建立连接阶段。此时会让我们的应用变得 suffer，那就需要考虑发送 volatile 数据。 #####

运行index.js:

![Center][]  
 启动web服务器，访问index.html:

![Center 1][]

再打开一个窗口打开这个链接:

![Center 2][]

服务端打印日志信息:

![Center 3][]

node 的socket.io模块使用起来非常简单方便，把我们需要交互的实时信息推送到前端的页面。

[Center]: /images/20220728/fa713882b2f7489f95e10146132de9f1.png
[Center 1]: /images/20220728/5c76c8b3a2b94d58b47135f13ff259ac.png
[Center 2]: /images/20220728/241b9794e9b340d286bb81c493be5e32.png
[Center 3]: /images/20220728/a66fcdf0594449a68678d57c38d3d6ff.png