直播平台在线人数功能

最近在做直播平台，需要实现在线人数的显示在线观看直播的人数使用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