1

だから私は小さな「共同ブラウジング」デモを書いています。主に教育目的のため。

とはいえ、予定はこうです。ユーザーはブラウザを開いて私のサーバーにアクセスし、マウスを動かします。その際、ブラウザはマウスの座標をサーバーに送信し、サーバーはその座標をチャネルにサブスクライブしている任意のブラウザに中継します。座標がテキスト ボックスに表示されます。

と を使用nodejsしてsocket.ioいます。

ここに私のserver.jsがあります：

var app = require('http').createServer(handler),
    io = require('socket.io').listen(app),
    fs = require('fs');


app.listen(80);

function handler(req, res) {
    var file = __dirname + '/public/index.html';
    fs.readFile(file, 
        function(err, data) {
            if(err) {
                res.writeHead(500);
                return res.end('Error loading index.html');
            }

            res.writeHead(200);
            res.end(data);
        }
    );
}


io.sockets.on('connection', function(socket) {
    socket.on('m', function(data) {
        socket.emit('relay', {msg: 'MouseX: ' + data.x + ' MouseY: ' + data.y});
    });
});

これが私のクライアントです：

<!doctype html>
<html>
    <head>
    </head>
    <body>

        <input id='box' type='text' size='200' />

        <script src='/socket.io/lib/socket.io.js'></script>
        <script>

            var socket = io.connect('http://localhost');
            var b = document.getElementById('box');

            socket.on('relay', function(data) {
                b.setAttribute('value', data.msg);
            });

            document.onmousemove = function(event) {
                event = event || window.event;
                socket.emit('m', {x: event.clientX, y: event.clientY});
            }


        </script>

    </body>
</html>

ここで、2 つのブラウザーを開き、両方とも localhost をポイントすると、ウィンドウの上にマウスを移動すると、上部のテキスト ボックスが機能します。座標を示しています。ただし、OTHER ブラウザは何もしません。しかし、マウスを他のブラウザに移動すると、そのウィンドウに座標が表示されます。現在ホバリングしているブラウザにのみリレーするようです。サーバー コンソールは、両方のブラウザーで動きを示します。

しかし、両方のブラウザー ウィンドウがrelayイベント (チャネル) に応答しているので、両方のブラウザーが座標をエコーするべきではないでしょうか? ブラウザ 1 のマウスの動きがブラウザ 2 にエコーされ、ブラウザ 2 に移動すると、その座標がブラウザ 1 にエコーされますか?

それが理にかなっていることを願っています。

ありがとう

** 解決 **

迅速な回答をしてくれたVictor Stanciuに感謝します。これが私がサーバーを修正するためにしたことです。 

var app = require('http').createServer(handler),
    io = require('socket.io').listen(app),
    fs = require('fs');


app.listen(80);

function handler(req, res) {
    var file = __dirname + '/public/index.html';
    fs.readFile(file, 
        function(err, data) {
            if(err) {
                res.writeHead(500);
                return res.end('Error loading index.html');
            }

            res.writeHead(200);
            res.end(data);
        }
    );
}

var sockets = [];
io.sockets.on('connection', function(socket) {
    sockets.push(socket);

    socket.on('m', function(data) {
        io.sockets.emit('relay', {msg: 'MouseX: ' + data.x + ' MouseY: ' + data.y});
    });
});
4

1 に答える 1

5

これは、信号を受信するソケットにのみエミットしているためです。

io.sockets.on('connection', function(socket) {
    socket.on('m', function(data) {
        socket.emit('relay', {msg: 'MouseX: ' + data.x + ' MouseY: ' + data.y});
    });
});

これは、「'm' シグナルが 'socket' から受信されたら、'relay' シグナルを送信する」という意味です。

あなたがしなければならないことはこれです-新しいソケットが接続されたら、それを配列に追加します-ソケットが信号を発するとき、接続されたすべてのソケットを繰り返し、それらのそれぞれに「リレー」信号を発します

var sockets =  [];
io.sockets.on('connection', function(socket) {
    sockets.push(socket);

    socket.on('m', function(data) {
        sockets.forEach(function (socket) {
            socket.emit('relay', {msg: 'MouseX: ' + data.x + ' MouseY: ' + data.y});
        });
    });
});

または、接続されたソケットを手動で繰り返すのではなく、socket.io がこれを行う方法を提供します。

 io.sockets.emit('this', { will: 'be received by everyone'});
于 2012-10-17T13:28:32.420 に答える