active-clients(visitors)

ANY.html

/**
 * TO INCLUDE CLIENT USE:
 * <script type="text/javascript" src="./assets/scripts/base.js"></script>
 */

base.js

// ./assets/scripts/base.js

/**
 * @description Page initialization loading event
 */
$(document).ready(function () {
    // Make WebSocket requests to establish a connection to collect statists about online browsing website users
    onlineUserCounts();
});

/*Request address*/
let reqSite = "http://localhost:8081";
let reqSiteWebSocket = "ws://localhost:8081";
/*Layer prompt icon*/
let GREEN_CHECK_MARK = 1;
let RED_ERROR_MARK = 2;
let YELLOW_QUESTION_MARK = 3;
let GRAY_LOCKING_MARK = 4;
let RED_CRYING_MARK = 5;
let GREEN_SMILE_MARK = 6;
/*Number of viewers on the website*/
let WEBSITE_VISITORS = 0;

/**
 * @author
 * @date  2021-05-29 21:51:12
 * @description Sending requests to the backend server to count the number of online people
 */
function onlineUserCounts() {
    if (!checkWebSocket()) {
        layerMsg('The browser doesn\'t support WebSocket at all', GREEN_SMILE_MARK, 3000);
        return;
    }
    let onlineUserCountSocket = new WebSocket(reqSiteWebSocket + "/ws");
    onlineUserCountSocket.onmessage = function (msg) {
        $('#visits').text(msg.numClients);
        WEBSITE_VISITORS = msg.numClients;
    };
    onlineUserCountSocket.onclose = function (msg) {
        console.log(msg);
    };
    onlineUserCountSocket.onerror = function (msg) {
        console.log(msg);
    };
    $(window).on("unload", function (e) {
        onlineUserCountSocket.close();
    });
}

/**
 * @returns {boolean}
 * @author 
 * @date 2021-05-29 21:43:44
 * @description Detecting whether the browser supports or not WebSocket
 */
function checkWebSocket() {
    return 'WebSocket' in window || 'MozWebSocket' in window;
}

/**
 * @param msg  Prompt message
 * @param icon Display icon
 * @param time Display time (millisecond)
 * @author
 * @date 2019-12-18 23:19:25
 * @description This method is designed to encapsulate the msg prompt message of the Layer plugin to make it more convenient to use
 */
function layerMsg(msg, icon, time) {
    if (isEmpty(msg)) msg = "hi"; // "Hello, dear visitor";
    if (isEmpty(icon)) icon = GREEN_CHECK_MARK;
    if (isEmpty(time)) time = 3000;
    layer.msg(msg, {icon: icon, time: time});
}

package.json

/** 
 * Add jQuery
 * Layers
 * ws
 */

server.js

// ./ws/server.js

import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8081 });

wss.on('connection', function connection(ws) {
    numClients++;
    console.log('Connected clients:', numClients);
    ws.send('count', { numClients: numClients });

    ws.on('disconnect', function() {
        numClients--;
        ws.send('count', { numClients: numClients });
        console.log('Connected clients:', numClients);
    });
});


// import express from 'express'
// import expressWs from 'express-ws'
// import http from 'http'

// /*Our port*/
// let port = 8081;
// /*App and server*/
// let app = express();
// let server = http.createServer(app).listen(port);
// let numClients = 0;
// /*Apply expressWs*/
// expressWs(app, server);

// // Get the /ws websocket route
// app.ws('/ws', async function(ws, req) {
//     ws.on('connection', async function() {
//         numClients++;
//         console.log('Connected clients:', numClients);
//         ws.send('count', { numClients: numClients });

//         ws.on('disconnect', async function() {
//           numClients--;
//           ws.send('count', { numClients: numClients });
//           console.log('Connected clients:', numClients);
//         });
//     });
// });