如何在 HTML 上使用 node.js 和 socket.io.js 显示连接的客户端

Question

我是 node.js 和 socket.io 的新手，我能够通过 node.js 启动本地服务器并使用 console.log 获取连接到端口 3000 的客户端数量现在我的下一步是在我的 HTML 上显示它，我正在阅读有关如何在 HTML 中包含 socket.io.js 并尝试了 on('connect') 方法，但它返回了一个未定义的错误，任何建议都将提前非常感谢！

我的 server.js

var express = require('express');

    var app = express();
    var server = require('http').createServer(app);
    var io = require('socket.io').listen(server);
    users = [];
    connections = [];

    server.listen(process.env.PORT || 3000);
    console.log('listening to port 3000, server is running..');

    app.get('/', function (req,res){

        res.sendFile(__dirname + '/index.html');

    });

    io.sockets.on('connection',function(socket){

        connections.push(socket);
        console.log('Connected: %s sockets connected', connections.length);



        //Disconnect
        socket.on('disconnect', function(data){
            users.splice(users.indexOf(socket.username), 1);
            updateUsernames();
            connections.splice(connections.indexOf(socket), 1);
            console.log('Disconnected: %s sockets connected', connections.length);
        });



    });

在我的 index.html 上

//This is located on my html head tag
<script src="http://localhost/socket.io/socket.io.js"></script>


 <div class="col-lg-12">
        <h1 id="users"></h1>
    </div>

  <script>
    var socket = io.connect('http://localhost:3000');

    socket.on('connect',function(){

        $('#users').html = socket.users.length;

    ));

 </script>

Answer 1

我设法通过发出一个事件在客户端显示连接用户的数量，而不是客户端将接收并显示它。

修改了我的 server.js

  io.sockets.on('connection',function(socket){

    connections.push(socket);
    console.log('Connected: %s sockets connected', connections.length);

    //added this below
    io.sockets.emit ('totalUsers', {count: connections.length});


    //Disconnect
    socket.on('disconnect', function(data){
        users.splice(users.indexOf(socket.username), 1);
        updateUsernames();
        connections.splice(connections.indexOf(socket), 1);
        console.log('Disconnected: %s sockets connected', connections.length);

       //added this below
    io.sockets.emit ('totalUsers', {count: connections.length});

    });

然后在我的 index.html 上

 socket.on('totalUsers', function(data){

        console.log(data.count);
         $users.html('Total connected users: '+data.count);

    });

Answer 2

您必须在 html 上的 io.connect() 之前包含或链接您的 socket.io.js。像这样

<script type="text/javascript" src="assets/nodejs/node_modules/socket.io-client/dist/socket.io.js"></script> 

你可以使用这个cdn

https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js

但如果您使用的是最新版本的节点，最好在本地文件夹中使用 socket.io.jsnode_modules/socket.io-client/dist/socket.io.js。

希望它会有所帮助。