Socket.IO Node.JS Client Side Displaying Variable.

Question

I am creating an application which in my eyes requires a variable that changes to be displayed in front of the client at any given time.

A given example, user foo has $100 dollars. An event happens which deducts $20 dollars from user foo's account. As soon as this deduction happens i would like the clients text to change to $80.

I have a fundamental understanding of how this needs to happen.

Here is the code I have,

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>

I can imagine it would have to be emitted by app.js, but i have not the idea on how to display it to the client. You can see in the index.html, i have where i would like the variable to be displayed.

Javier Conde · Accepted Answer · 2015-11-09 04:33:40Z

You HTML is completely messed up, here is an example of working code, each time the client clicks on 'Buy', it will send a signal to the Node server, this one will receive it, discount $20 from his balance and send the updated balance to the client.

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>

Fujiao Liu · Accepted Answer · 2015-11-09 03:55:56Z

0

I think socket in index.html should emit connection first.

try to change

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

to

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

answered Nov 9, 2015 at 3:55

Fujiao Liu

2,2732 gold badges25 silver badges28 bronze badges

Collectives™ on Stack Overflow

Socket.IO Node.JS Client Side Displaying Variable.

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related