[Node.js]29. Level 6: Socket.io: Setting up Socket.io server-side & Client socket.io setup

Below we've already created an express server, but we want to start building a real-time Q&A moderation service and we've decided to use socket.io.

Require socket.io and make sure it listens for requests on the express app.

Also, print out a message to the console whenever a new socket.io client connects to the server.

app.js

var express = require('express');
var socket = require('socket.io');
var app = express.createServer();
var io = socket.listen(app);

io.sockets.on('connection', function(client){
    console.log("Welcome...");
});

In our html file, load the socket.io.js script and then use io.connect to connect to socket.io on the server. Connect to the server at http://localhost:8080.

Tip: the socket.io.js path you should use is /socket.io/socket.io.js. Express knows to serve the socket.io client js for this path.

index.html

<script src="/socket.io/socket.io.js"></script>
<script>
  // use the socket.io server to connect to localhost:8080 here
  var server = io.connect('http://localhost:8080');
</script>

In our client below, listen for 'question' events from the server and call the insertQuestionfunction whenever the event fires. The insertQuestion function is already created for you, and it's placed in its own file. It expects exactly one argument - the question.

index.html

<script src="/socket.io/socket.io.js" />
<script src="/insertQuestion.js" />

<script>
  var server = io.connect('http://localhost:8080');

  // insert code here
server.on('question', function(data){
    insertQuestion(data);
});
</script>

insertQuestion.js

var insertQuestion = function(question){
  var newQuestion = document.createElement('li');
  newQuestion.innerHTML = question;

  var questions = document.getElementsByTagName('ul')[0];
  return questions.appendChild(newQuestion);
}

When a question is submitted to our server, we want to broadcast it out to all the connected clients so they can have a chance to answer it.

In the server below, listen for 'question' events from clients and then emit the 'question' event on all the other clients connected, passing them the question data.

var express = require('express');
var app = express.createServer();
var socket = require('socket.io');
var io = socket.listen(app);

io.sockets.on('connection', function(client) {
  console.log("Client connected...");

  // listen here
  client.on('question', function(question){
    //All client, so it is broadcast
      client.broadcast.emit('question', question);
  });
});

In our real-time Q&A app, we want to allow each client only 1 question at a time, but how do we enforce this rule?

We can use socket.io's ability to save data on the client, so whenever a question is asked, we first want to check the 'question_asked' value on the client. If it's not already set to true, broadcast the question and then go ahead and set the value to true.

var express = require('express');
var app = express.createServer();
var socket = require('socket.io');
var io = socket.listen(app);

io.sockets.on('connection', function(client) {
  console.log("Client connected...");

  client.on('question', function(question) {
    client.get('question_asked', function(err, asked){
      if(!asked){
          client.broadcast.emit('question', question);
          client.set('question_asked', true);
      }
    });  
  });
});