Sending server side variables to client node.js and socket.io

Question

I'm going to ask a really n00b question. Because I've been reading docs, and digging around here, and its just not getting into my brain.

I'm following this tutorial: http://socket.io/get-started/chat/

I'd like to know how to set the value of variable on the server side, and pass that value to the client side to render in an alert.

I know this is wrong, because alert(alertMsg); comes back undefined, but here's my starting point:

Server side:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var fs = require('fs');
var port = process.env.PORT || 3000;

var alertMsg = 'alert message goes here';

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

io.on('connection', function(socket){

    console.log('a user connected');

    socket.on('connect', function(alertMsg){
        io.emit('alert: ' + alertMsg);
    }); 

    socket.on('chat message', function(msg){
        console.log('message: ' + msg);
        io.emit('chat message', msg); // send the message to everyone
    });

    socket.on('disconnect', function(){
        console.log('user disconnected');
    });
});

http.listen(3000, function(){
    console.log('listening on %d', port);
});

Client Side:

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>

    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      var socket = io();

      $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      // I know this isn't right ATM... 
      socket.on('connect', function(alertMsg){
        alert(alertMsg);
      });

      socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
      });
    </script>
  </body>
</html>

I'm definitely missing something very obvious. I just can't see it.

Suggestions?

Thanks.

jfriend00 · Accepted Answer · 2015-01-27 06:27:58Z

The client has to listen for the same message name that the server sends. Right now, you're sending a variable message name from the server by using io.emit('alert: ' + alertMsg);, so there's no way to listen for that particular message in the client.

Change the server to:

io.emit('alert', alertMsg);

Add to the client:

socket.on('alert', function(msg) {
    alert(msg);
});

See how this is sending and listening to the same message name?

Then, also remove this code because no alertMsg is being sent upon connection (it comes in later):

  // I know this isn't right ATM... 
  socket.on('connect', function(alertMsg){
    alert(alertMsg);
  });

Collectives™ on Stack Overflow

Sending server side variables to client node.js and socket.io

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related