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

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

我的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.js ，它位于node_modules/socket.io-client/dist/socket.io.js中。

希望它会有所帮助。