Question

我正在创建一个应用程序，在我眼中需要一个变量，可以在任何给定时间更改为显示在客户端前面。

一个给定的例子，用户foo有100美元。发生的事件会从用户foo的帐户中扣除20美元。一旦发生这种扣除，我希望客户文本更改为80美元。

我对如何实现这一点有了基本的了解。

这是我的代码，

app.js

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

var balance = '100';


app.listen(80);

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

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

io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

的index.html

  <script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io('http://192.168.1.50');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });

  <html><p>Balance: balancehere.</p> </html>
</script>

我可以想象它必须由app.js发出，但我不知道如何将它显示给客户端。你可以在index.html中看到，我希望变量显示在哪里。

Answer 1

你的HTML完全搞砸了，这是工作代码的一个例子，每次客户点击'购买'时，它会向节点服务器发送一个信号，这个人将收到它，从他的余额中扣除20美元，将更新的余额发送给客户。

app.js：

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

var balance = '100';


app.listen(80);

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

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

io.on('connection', function (socket) {
    console.log('connected');
  socket.on('buy', function (data) {
    socket.emit('update balance', data-20); // Decrease 20 from the balance
  });

  socket.emit('news', { hello: 'world' });
});

的index.html：

<html>
    <head>
        <script src="/socket.io/socket.io.js"></script>
        <script>
                window.addEventListener("load", function(event) {
                    function updateBalance () {
                        document.getElementById("balance").innerText = balance;
                    }
                    var balance = 100;
                    updateBalance();
                    var socket = io(location.href.split( '/' )[2]); // Connect to same URL

                    socket.on('update balance', function (data) {
                        balance = data;
                        updateBalance();
                    });

                    document.getElementById("button").onclick = function () {
                        socket.emit('buy', balance);
                    };
                });
        </script>
    </head>
    <body>
        <p>Balance: $<span id="balance"></span></p><br/>
        <button id="button">Buy</button>
    </body>
</html>

Answer 2

我认为index.html中的套接字应首先发出connection。

尝试改变

var socket = io('http://192.168.1.50');

到

var socket = io('http://192.168.1.50');
socket.emit('connection', 'test');

Socket.IO Node.JS客户端显示变量。

2 个答案: