Question

我是node.js的新手，并通过'smashing node.js'一书的例子。在websockets章节中，我很难让这个例子起作用。原谅我这是一个非常简单的错误！我很困惑，为什么我甚至不能使用作者的代码看到光标？我从Github下载了源代码。

代码如下:(首先是server.js文件）：

var express = require('express')
  , wsio = require('websocket.io')

/**
 * Create express app.
 */

var app = express.createServer();

/**
 * Attach websocket server.
 */

var ws = wsio.attach(app);

/**
 * Serve our code
 */

app.use(express.static('public'))

/**
 * Listening on connections
 */

var positions = {}
  , total = 0

ws.on('connection', function (socket) {
  // we give the socket an id
  socket.id = ++total;

  // we send the positions of everyone else
  socket.send(JSON.stringify(positions));

  socket.on('message', function (msg) {
    try {
      var pos = JSON.parse(msg);
    } catch (e) {
      return;
    }

    positions[socket.id] = pos;
    broadcast(JSON.stringify({ type: 'position', pos: pos, id: socket.id }));
  });

  socket.on('close', function () {
    delete positions[socket.id];
    broadcast(JSON.stringify({ type: 'disconnect', id: socket.id }));
  });

  function broadcast (msg) {
    for (var i = 0, l = ws.clients; i < l; i++) {
      // we avoid sending a message to the same socket that broadcasts
      if (socket.id != ws.clients[i].id) {
        // we call `send` on the other clients
        ws.clients[i].send(msg);
      }
    }
  }
});

/**
 * Listen
 */

app.listen(3000);

其次是./public/index.html文件的脚本内容：

<!doctype html>
<html>
  <head>
    <title>WebSocket cursors</title>
    <script src="onload">
      window.onload = function () {
        var ws = new WebSocket('ws://localhost:3000');

        ws.onopen = function () {
          document.onmousemove = function (ev) {
            ws.send(JSON.stringify({ x: ev.clientX, y: ev.clientY }));
          }
        }

        ws.onmessage = function (msg) {
          var obj = JSON.parse(msg);

          // the first message is the position of all existing cursors
          if (initialized) {
            initialized = true;
            for (var id in obj) {
              move(id, obj[i]);
            }
          } else {
            // other messages can either be a position change or
            // a disconnection
            if ('disconnect' == obj.type) {
              remove(obj.id);
            } else {
              move(obj.id, obj.pos);
            }
          }
        }

        function move (id, pos) {
          var cursor = document.getElementById('cursor-' + id);

          if (!cursor) {
            cursor = document.createElement('img');
            cursor.src = '/cursor.png';
            cursor.style.position = 'absolute';
            document.body.appendChild(cursor);
          }

          cursor.style.left = pos.x + 'px';
          cursor.style.top = pos.y + 'px';
        }

        function remove (id) {
          var cursor = document.getElementById('cursor-' + id);
          cursor.parentNode.removeChild(cursor);
        }
      }
    </script>
  </head>
  <body>
    <h1>WebSocket cursors</h1>
  </body>
</html>

Answer 1

我将快速框架从版本2.x.x更改为最新版本，并更新了我的websocket.io。然后重新编写我的代码。现在我可以成功运行它。这是我的代码：

server.js：

var express = require('express'),
    wsio = require('websocket.io'),
    port = 3000,
    app = express(),
    server = app.listen(port, function() {
        console.log('server listening on port ' + port);
    });

app.use(express.static('public'))
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

var ws = wsio.attach(server),
    positions = {},
    total = 0;

ws.on('connection', function(socket) {
    socket.id = ++total;

    socket.send(JSON.stringify(positions));

    socket.on('message', function(msg) {
        try {
            var pos = JSON.parse(msg);
        } catch (e) {
            return;
        }

        positions[socket.id] = pos;
        broadcast(JSON.stringify({
            type: 'position',
            pos: pos,
            id: socket.id
        }));
    });

    socket.on('close', function() {
        delete positions[socket.id];
        broadcast(JSON.stringify({
            type: 'disconnect',
            id: socket.id
        }));
    });

    function broadcast(msg) {
        for (var i = 0, l = ws.clients.length; i < l; i++) {
            if (ws.clients[i] && socket.id != ws.clients[i].id) {
                ws.clients[i].send(msg);
            }
        }
    }
});

和index.html：

<!doctype html>
<html>

<head>
    <title>WebSocket cursors</title>
    <script>
    window.onload = function() {
        var ws = new WebSocket('ws://localhost:3000');

        ws.onopen = function() {
            document.onmousemove = function(ev) {
                ws.send(JSON.stringify({
                    x: ev.clientX,
                    y: ev.clientY
                }));
            }
        }

        ws.onmessage = function(msg) {
            var obj = JSON.parse(msg.data),
                initialized = (obj.type) ? true : false;

            if (!initialized) {
                initialized = true;
                for (var id in obj) {
                    move(id, obj[id]);
                }
            } else {
                if ('disconnect' == obj.type) {
                    remove(obj.id);
                } else {
                    move(obj.id, obj.pos);
                }
            }
        }

        function move(id, pos) {
            var cursor = document.getElementById('cursor-' + id);

            if (!cursor) {
                cursor = document.createElement('img');
                cursor.src = '/cursor.png';
                cursor.id = 'cursor-' + id;
                cursor.style.position = 'absolute';
                document.body.appendChild(cursor);
            }

            cursor.style.left = pos.x + 'px';
            cursor.style.top = pos.y + 'px';
        }

        function remove(id) {
            var cursor = document.getElementById('cursor-' + id);
            if (cursor) cursor.parentNode.removeChild(cursor);
        }
    }
    </script>
</head>

<body>
    <h1>WebSocket cursors</h1>
</body>

</html>

Node.js websocket.io游标示例我看不到它？

1 个答案: