DEV Community

Cover image for You don't need express to get started with socket.io
Sadick
Sadick

Posted on

You don't need express to get started with socket.io

The best place to get started with socket.io is their website. But once you access it you are given this example app demonstrating how to use socket.io.

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

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

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

If you are fairly new to node, this makes you think that express is needed in order to use socket.io. In the above example they include express to serve the index file which will be client app for your socket server. There is nothing wrong with the above approach but if lets say you don't know express, now you have one more thing to learn before using socket.io.

It would be better if they didn't introduce an additional library in their example. Socket.io has another example using the node http server

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');

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);
  });
});

But even this is a little bit too much. I prefer having the server and the client seperate. Therefore this would be my server.

const io = require("socket.io");
const server = io.listen(3000);

server.on("connection", function(socket) {
  console.log("user connected");
  socket.emit("welcome", "welcome man");
});

And the client would include the socket.io client library and just plain html.

<html>
    <head>
        <title>Socket io client</title>
        <script src="http://localhost:3000/socket.io/socket.io.js"></script>
        <script>
            var socket = io("http://localhost:3000");
            // use your socket
            socket.on("welcome", (message) => {
                // do something with the message.
            })
        </script>
    </head>
    <body>
    </body>
</html>

Top comments (21)

Collapse
 
bgadrian profile image
Adrian B.G.

And most important, you do not need socket.io to start with websockets.

Collapse
 
sadick profile image
Sadick • Edited

Its true, you don't. But socket.io implements WebSocket backend and frontend with many fallbacks for probably every possible browser you can imagine.

Collapse
 
aghost7 profile image
Jonathan Boudreau • Edited

I think this generally isn't relevant anymore. Even IE implements websockets.

Thread Thread
 
sadick profile image
Sadick

IE implements Websockets from version 11. It only becomes irrelevant if you don't intend to support versions 10 and below.

Thread Thread
 
aghost7 profile image
Jonathan Boudreau

Not even Microsoft supports IE 10 and below anymore. If your company is supporting it, they need to look back at their policies because supporting a browser that hasn't been supported by its vendor since 2016 is a security risk.

Collapse
 
bgadrian profile image
Adrian B.G.

I know but you do not need that when you get started with real-time communication, which I presumed the topic is all about.

I'm pro learning the base technology first (vanilla web socket) then learn socketIO (which solve a few problems you will encounter in production).

Collapse
 
sahilatahar profile image
Sahil Atahar

Nice, I have build a Realtime code editor project using socket.io called Code-Sync.

It offers a real-time collaborative code editor featuring unique room generation, syntax highlighting, and auto-suggestions. Users can seamlessly edit, save, and download files while communicating through group chat

Collapse
 
rbuubr profile image
Kirill Tatchihin

And what's up next? Are there any special options to control events on the client-side?

Collapse
 
sadick profile image
Sadick

Socket.io has a client api which specifies the options available.

Collapse
 
rbuubr profile image
Kirill Tatchihin

imho, I think, it will be better to provide example

Thread Thread
 
sadick profile image
Sadick

Sure. I will include an example on the post and notify you once its up.

Collapse
 
sadick profile image
Sadick

I have included a piece on the client on how to consume the socket io event emitted from the server. Is it sufficient?

Collapse
 
sherzo profile image
Saul Florez

Great. How could it be implemented with https?

Collapse
 
whatnot911 profile image
Mickety

What about doing the same thing with https ?

Collapse
 
nishchit14 profile image
Nishchit

Also, Test/debug the socketio events while you're developing it without writing a single line of frontend code. (no it's not console.log)

It's firecamp.app

Collapse
 
pepsiamir profile image
pepsiamir

I always had this question of Why everybody using express in their examples.

Thank you so much for writing this article. As I searched google, directly found your article. well written and concise.

Collapse
 
whatnot911 profile image
Mickety

Thanks man. Very nice.

Collapse
 
jys923 profile image
jys923

how can I send msg only room member?
"socket.to(roomName).emit('joinRoom2', roomName, name); "is not working

Collapse
 
sathesh190804 profile image
SATHESH Kumar

Any one can help to develop a socket IO communication between local server and web server to sync data. Pls send me mail at skumarrcg@gmail.com or whatsapp me at +60173051009