第十步：Socke.IO – 實時用戶數(shù)

第十步：Socke.IO – 實時用戶數(shù)

本節(jié)我們將聚焦在服務(wù)器端的Socket.IO。

打開server.js并找到下面的代碼：

app.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

用下面的代碼替換上面的：

/**
 * Socket.io stuff.
 */
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var onlineUsers = 0;

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

  io.sockets.emit('onlineUsers', { onlineUsers: onlineUsers });

  socket.on('disconnect', function() {
    onlineUsers--;
    io.sockets.emit('onlineUsers', { onlineUsers: onlineUsers });
  });
});

server.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

概括的來說，當發(fā)起一個WebSocket連接，它增加onlineUsers數(shù)量（一個全局變量）并發(fā)布一個廣播——“嘿，我現(xiàn)在有這么多在線訪問者啦！”當某人關(guān)閉瀏覽器離開，onlineUsers數(shù)量減少并再次發(fā)布廣播“嘿，有人剛剛離開了，我現(xiàn)在有這么多在線訪問者了。”

注意：如果你從來沒用過Socket.IO，那么這個聊天室應(yīng)用教程非常適合你。

打開views目錄下的index.html并添加下面的代碼到其它script標簽下面：

<script src="https://atts.w3cschool.cn/attachments/image/cimg/socket.io.js"></script>

刷新瀏覽器，然后在不同的標簽頁打開http://localhost:3000以模擬不同的用戶連接?，F(xiàn)在你應(yīng)該能在logo的圓點上看到訪問者總數(shù)了。

到目前為止，我們既沒有完成前端，也沒有能用的API端點。我們可以在教程前半部分專注在前端，然后在后半部分專注于后端，或者反過來。但就我個人來說，我從來沒像這樣構(gòu)建過任何App。在開發(fā)過程中，我一般在前端和后端之間切換著來做。