最近在做直播平台，需要实现在线人数的显示
在线观看直播的人数使用websocket感觉很好，当有人进入直播平台，后台触发人数加1，当有人退出平台例如关闭浏览器，后台会触发断开连接方法，人数减1。
使用socket.io
1.websocket服务端
1）引入包
var app = require('http').createServer()
var io = require('socket.io')(app)
2）定义在线人数的全局变量
var count = 0
3）设置websocket服务端口
app.listen(5000)
4）开启
io.on('connection', function(socket) {
5）当有人进入页面，就会与websocket服务器建立通信
就会触发人数加1
count++;
console.log("当前接入" + count + "人")
6）我们人数发送给订阅了”users“的客户端
socket.emit('users', { peoNum: count })
//当有数据改变时，会自动将人数广播到订阅users的客户端
socket.broadcast.emit('users', { peoNum: count });
7）当有人断开连接，就会触发断开方法，人数减1
socket.on('disconnect', function() {
--count;
console.log("当前接入" + count + "人")
socket.broadcast.emit('users', { peoNum: count });
});
})
图片.png
2.websocket客户端
1）引入包
<script src="http://cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script>
2）人数显示
<h3>当前在线人数：<span id="allpeople"></span> </h3>
3）连接websocket服务器，订阅users信息，当接收到服务端广播的人数信息，就会将其显示到页面
var socket = io('localhost:5000')
socket.on('users', function(data) {
console.log(data)
document.getElementById('allpeople').innerHTML = data.peoNum
socket.on('disconnect', function() {
console.log("与服务断开");
});
})
图片.png
