Creating Real-Time Chat with Node.js and Socket.IO

Submitted by admin on Wednesday, December 7, 2016 - 14:57.

The way that people use internet evolved from static pages to Ajax and now to realtime web supported by standards like WebSockets and WebRTC. Making a real-time application, like chat, became increadibly easy with the help of platforms like Node.js and libraries like Socket.io. In this post we'll see how to create a minimalistic chat application form the scratch. Create a separate folder for your new project and type `npm init` in it. Then, install the required dependencies. For this project we will only need express.js and socket.io:

> npm install --save express socket.io
<code>
 
Let's start from a minimalistic express application that can serve static files. Create a file called main.js. Here's how my minimal express app looks:
 
<javascript>
const express = require('express');
const http = require('http');
 
const app = express();
const server = http.createServer(app);
 
app.use(express.static(`${__dirname}/public`));
 
server.listen(3000, () => console.log('Ready on 0.0.0.0:3000'));
</javascript>
 
Notice that I had to use node.js standard module `http` to create server instead of using Express right away. We will need that `server` object later when we'll initialize socket.io.
 
The folder called `public` is the one to keep our static client-side files. Let's create `index.html` right away. Usually I would separate JavaScript code in a separate file, but for this tutorial, I'll keep it all in one file for the sake of readability and navigation.
 
<html4strict>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>File Upload</title>
</head>
<body>
 
  <ul id="chat">
  </ul>
 
  <form id="say-form">
  	<input><button type="submit">Say</button>
  </form>
 
  <script></script>
</body>
</html>
</html4strict>
 
As you see I added some very basic chat controls to this page and placed `<script>` tag for our client-side JS.
 
Let's write some helper chat functions in our client JS. Put the following code in between `<script>` tags.
 
<html4strict>
<script>
 
  function onChatMessage(msg) {
    var ul = document.querySelector('#chat');
    var item = document.createElement('li');
    item.innerHTML = msg;
    ul.appendChild(item);
  }
 
  function sendChatMessage(e) {
    e.preventDefault();
 
    var inp = document.querySelector('#say-form input');
    var msg = inp.value;
    inp.value = '';
 
    // Replace later with actual sending code
    onChatMessage(msg);
  }
 
  (function init() {
    var form = document.querySelector('#say-form');
    form.addEventListener('submit', sendChatMessage);
  })();
 
</script>
</html4strict>
 
This code simply displays the message that you send through the form back on the page. This chat is not yet connected to server (and of course you will not see any other user's messages this way).
 
Let's add some Socket.IO magic to this project and connect all the chats. First thing to do is to initialise socket.io on server. Add the follwowin code to your `main.js` file as follows:
 
<javascript>
const io = require('socket.io')(server);
 
io.on('connection', (sock) => {
  sock.emit('msg', 'You are connected');
});
</javascript>
 
This code accepts connection from the client and sends back an event of type `msg` to everyone who connected. The only thing we need to do now is to connect the client and display the message! Let's edit our client-side HTML code again:
 
<javascript>
<script src="/socket.io/socket.io.js"></script>
<script>
  var sock = io();
  sock.on('msg', onChatMessage);
 
  /* rest of the code stays the same */
</javascript>
 
With just that two lines, we will connect to our server and display the message on a page
whenever server sends us something. You can test it right now! Once you open 
http://localhost:3000, you'll see the welcome message from the server!
 
Now let's make client talk back to server and send a message each time a user is typing 
something in chat.
 
<javascript>
io.on('connection', (sock) => {
  sock.emit('msg', 'You are connected');
  sock.on('msg', (msg) => io.emit('msg', msg));
});
</javascript>
 
Now, whenever the server receives `msg` from one of the clients, it will broadcast the 
same message back to everybody who is connected right now. Test it again! Open two browser
windows and start sending messages and you'll see that the chat is working!
 
Congratulations! In about 30 lines of JavaScript code you managed to build a functional 
real-time chat with Node.js and Socket.IO. Let's review the completed code:
 
main.js (server)
 
<javascript>
const express = require('express');
const http = require('http');
 
const app = express();
const server = http.createServer(app);
const io = require('socket.io')(server);
 
io.on('connection', (sock) => {
  sock.emit('msg', 'You are connected');
  sock.on('msg', (msg) => io.emit('msg', msg));
});
 
app.use(express.static(`${__dirname}/public`));
 
server.listen(3000, () => console.log('Ready on 0.0.0.0:3000'));
</javascript>
 
index.html (client)
 
<html5>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>File Upload</title>
</head>
<body>
 
<ul id="chat"></ul>
 
<form id="say-form">
  <input><button type="submit">Say</button>
</form>
 
<script src="/socket.io/socket.io.js"></script>
<script>
  var sock = io();
  sock.on('msg', onChatMessage);
 
  function onChatMessage(msg) {
    var ul = document.querySelector('#chat');
    var item = document.createElement('li');
    item.innerHTML = msg;
    ul.appendChild(item);
  }
 
  function sendChatMessage(e) {
    e.preventDefault();
 
    var inp = document.querySelector('#say-form input');
    var msg = inp.value;
    inp.value = '';
 
    sock.emit('msg', msg);
  }
 
  (function init() {
    var form = document.querySelector('#say-form');
    form.addEventListener('submit', sendChatMessage);
  })();
</script>
</body>
</html>
</html5>

Creating Real-Time Chat with Node.js and Socket.IO

Tags

Comments

hay

Add new comment