In this guide we’ll create a basic chat application. It requires almost no basic prior knowledge of Node.JS or Socket.IO, so it’s ideal for users of all knowledge levels.
Writing a chat application with popular web applications stacks like LAMP (PHP) has normally been very hard. It involves polling the server for changes, keeping track of timestamps, and it’s a lot slower than it should be.
Sockets have traditionally been the solution around which most real-time chat systems
are architected, providing a bi-directional communication channel between a client and a server.
This means that the server can push messages to clients. Whenever you write a chat message, the idea is that the server will get it and push it to all other connected clients.
The first goal is to set up a simple HTML webpage that serves out a form and a list of messages. We’re going to use the Node.JS web framework express to this end. Make sure
Node.JS is installed.
First let’s create a package.json manifest file that describes our project. I recommend you place it in a dedicated empty directory (I’ll call mine chat-example).
{ "name":"socket-chat-example", "version":"0.0.1", "description":"my first socket.io app", "dependencies":{} }
Now, in order to easily populate the dependencies property with the things we need, we’ll use npm install:
Once it's installed we can create an index.js file that will set up our application.
'); }); server.listen(3000,()=>{ console.log('listening on *:3000'); });
This
means that:
Express initializes app to be a function handler that you can supply to an HTTP server (as seen in line 4).
We define a route handler / that gets called when we hit our website home.
We make the http server listen on port 3000.
If you run node index.js you should see the following:
And if you point your
browser to http://localhost:3000:
So far in index.js we’re calling res.send and passing it a string of HTML. Our code would look very confusing if we just placed our entire application’s HTML there, so instead we're going to create a index.html file and serve that instead.
Let’s refactor our route handler to use sendFile instead.
Notice that I initialize a new instance of socket.io by passing the
server (the HTTP server) object. Then I listen on the connection event for incoming sockets and log it to the console.
Now in index.html add the following snippet before the
(end body tag):
<scriptsrc="/socket.io/socket.io.js">script> <script> var socket =io(); script>
That’s all it takes to load the socket.io-client, which exposes an io global (and the endpoint GET /socket.io/socket.io.js), and then connect.
If you would like to use the local version of the client-side JS file, you can find it at node_modules/socket.io/client-dist/socket.io.js.
Notice that I’m not
specifying any URL when I call io(), since it defaults to trying to connect to the host that serves the page.
If you now restart the process (by hitting Control+C and running node index.js again) and then refresh the webpage you should see the console print “a user connected”.
Try opening several tabs, and you’ll see several messages.
Each
socket also fires a special disconnect event:
io.on('connection',(socket)=>{ console.log('a user connected'); socket.on('disconnect',()=>{ console.log('user disconnected'); }); });
Then if you refresh a tab several times you can see it in action.
The main idea behind Socket.IO is that you can send and receive any events you want, with any data you want. Any objects that can be encoded as JSON will do, and
binary data is supported too.
Let’s make it so that when the user types in a message, the server gets it as a chat message event. The script section in index.html should now look as follows:
<scriptsrc="/socket.io/socket.io.js">script> <script> var socket =io(); var form =document.getElementById('form'); var input =document.getElementById('input'); form.addEventListener('submit',function(e){ e.preventDefault(); if(input.value){ socket.emit('chat message', input.value); input.value=''; } }); script>
And in index.js we print out the chat message event:
If everything goes well a message saying "Hello World" is printed on the page. Following is another example (this require Socket.IO), it will log "A user connected", every time a user goes to this page and "A user disconnected", every time someone navigates away/closes this page.
How do I use a Socket in node JS?
// make a connection with the user from server side io.on('connection', (socket)=>{ console.log('New user connected'); }); Similarly, from the client-side, we need to add a script file and then make a connection to a server through which users send data to a server.
What is the use of Socket.IO in node JS?
Socket.IO enables real-time bidirectional event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed. Socket.IO is built on top of the WebSockets API (Client side) and Node. js.
How do I start Socket.IO in node JS?
Creating an Express server.
Create a new file in the myapp folder. nano app.js. Copy code..
Paste the following code in the file, save and exit. // app.js. ... .
Create an index. html file in the myapp folder to display a Hello World message in the socket. ... .