0

我使用 Node.js 创建了一个简单的协作白板绘图应用程序。一切似乎都正常。但是，我有点坚持一个小功能。

我想在浏览器中显示一条状态消息，显示有多少其他连接的用户。我已将以下代码添加到server.js文件到 io.sockets.on 连接和断开连接：

// Set connected user counter on connection
var $ipAddress = socket.handshake.address;
if (!$ipsConnected.hasOwnProperty($ipAddress)) {
    $ipsConnected[$ipAddress] = 1;
    count++;
    socket.emit('connectedusers', {
        count: count
    });
}

// Set connected user counter on disconnect
if ($ipsConnected.hasOwnProperty($ipAddress)) {
    delete $ipsConnected[$ipAddress];
    count--;
    socket.emit('connectedusers', {
        count: count
    });
}

然后在客户端的文件sketch.js中，我添加了以下内容来设置连接用户的变量并将其分配给 ID 以在 HTML 浏览器中显示：

// Set status
socket.on('connectedusers',
    function (data) {
        var status = "Drawing with " + ((data.count)-1) + " other people";
        document.getElementById("status").innerHTML = status;
    }
);

当客户端运行时，您会看到已连接用户的状态显示为 OK。但是，如果有新用户加入，则无需刷新页面即可更新状态。

这是完整的代码

Node.js 服务器（文件server.js）

// Using Express.js: http://expressjs.com/
var express = require('express');

// Create the app
var app = express();

// Set up the server
// process.env.PORT is related to deploying on Heroku
var server = app.listen(process.env.PORT || 3000, listen);

// This call back just tells us that the server has started
function listen() {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Youmeus Draw listening at http://' + host + ':' + port);
}

// Set the root the root directory from which to serve static assets in a directory named public
app.use(express.static('public'));

// WebSocket portion
var io = require('socket.io')(server);


// Set connected user counter variables
var count = 0;
var $ipsConnected = [];


// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',

    // We are given a WebSocket object in our function
    function(socket) {

        // Send connected message to the console
        console.log("New client has connected: " + socket.id);

        // Set connected user counter on connection
        var $ipAddress = socket.handshake.address;
        if (!$ipsConnected.hasOwnProperty($ipAddress)) {
            $ipsConnected[$ipAddress] = 1;
            count++;
            socket.emit('connectedusers', {
                count: count
            });
        }

        // When this user emits, client side: socket.emit('otherevent', some data);
        socket.on('mouse',
            function(data) {

                // Data comes in as whatever was sent, including objects
                console.log("Received: 'mouse' " + data.x + " " + data.y + " " + data.px + " " + data.py);

                // Send it to all other clients
                socket.broadcast.emit('mouse', data);
            }
        );

        // On disconnect
        socket.on('disconnect', function() {

            // Send disconnected message to the console
            console.log("Client has disconnected");

            // Set connected user counter on disconnect
            if ($ipsConnected.hasOwnProperty($ipAddress)) {
                delete $ipsConnected[$ipAddress];
                count--;
                socket.emit('connectedusers', {
                    count: count
                });
            }
        });
    }
);

客户端 HTML（文件index.html）

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Draw Sockets Example</title>

        <script type="text/javascript" src="./assets/lib/jquery/js/jquery.min.js"></script>
        <script type="text/javascript" src="./assets/js/socket.io.js"></script>
        <script type="text/javascript" src="./assets/js/p5.min.js"></script>
        <script type="text/javascript" src="./assets/js/sketch.js"></script>

        <style>

            #canvas {
                z-index: 1;
                position: absolute;
                display: block;
                border: none;
                margin: 0;

                overflow: hidden !important;
            }

            #status {
                z-index: 2;
                position: absolute;
                display: block;
                bottom: 17px;
                left: 0;
                right: 0;
                height: 60px;
                margin: 0 20px 0 20px;
                padding: 0 5px 0 0;
                font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
                font-size: 30px;
                color: black;
                line-height: 130%;
                text-align: left;
            }

        </style>

    </head>
    <body>

        <!-- Status text field, for displaying connection information -->
        <div id="status"></div>

    </body>
</html>

客户端 JavaScript 代码（文件sketch.js）

// Keep track of our socket connection
var socket;

function setup() {
    // Create the canvas.
    let canv = createCanvas(window.innerWidth, window.innerHeight);

    // Assign a CSS selector ID to the canvas element
    canv.id('canvas');

    // Start a socket connection to the server
    socket = io.connect('http://192.168.1.100:3000', { transports : ['websocket'] });

    // Set status
    socket.on('connectedusers',
        function (data) {
            var status = "Drawing with " + ((data.count)-1) + " other people";
            document.getElementById("status").innerHTML = status;
        }
    );

    // We make a named event called 'mouse' and write an anonymous callback function
    socket.on('mouse',

        // When we receive data
        function(data) {
            console.log("Got: " + data.x + " " + data.y + " " + data.px + " " + data.py);

            // Draw
            stroke(20);
            strokeWeight(4);
            line(data.x, data.y, data.px, data.py);
        }
    );
}

function draw() {
    // Nothing
}

function mouseDragged() {
    // Draw
    stroke(20);
    strokeWeight(4);
    line(mouseX, mouseY, pmouseX, pmouseY);

    // Send the mouse coordinates. x, y, previous x, previous y
    sendmouse(mouseX, mouseY, pmouseX, pmouseY);
}

// Function for sending to the socket
function sendmouse(xpos, ypos, pxpos, pypos) {
    // We are sending!
    console.log("sendmouse: " + xpos + " " + ypos + " " + pxpos + " " + pypos);

    // Make a little object with x and y
    var data = {
        x: xpos,
        y: ypos,
        px: pxpos,
        py: pypos
    };

    // Send that object to the socket
    socket.emit('mouse', data);
}


// Window resize
function windowResized() {
    resizeCanvas(window.innerWidth, window.innerHeight);
}
4

0 回答 0