Differences between socket io and websockets

Question

What are the differences between socket io and websockets in     node js  Are they both server push technologies  The only differences I felt was    socket io allowed me to send emit messages by specifying an event name  In the case of socket io a message from server will reach on all clients  but for the same    in websockets I was forced to keep an array of all connections and loop through it to send messages to all clients    Also  I wonder why web inspectors  like Chrome firebug fiddler  are unable to catch these messages  from socket io websocket   from server   Please clarify this

User · Answer

Im going to provide an argument against using socket.io.

I think using socket.io solely because it has fallbacks isnt a good idea. Let IE8 RIP.

In the past there have been many cases where new versions of NodeJS has broken socket.io. You can check these lists for examples... https://github.com/socketio/socket.io/issues?q=install+error

If you go to develop an Android app or something that needs to work with your existing app, you would probably be okay working with WS right away, socket.io might give you some trouble there...

Plus the WS module for Node.JS is amazingly simple to use.

User · Answer

Misconceptions  There are few common misconceptions regarding WebSocket and Socket IO    The first misconception is that using Socket IO is significantly easier than using WebSocket which doesn t seem to be the case  See examples below  The second misconception is that WebSocket is not widely supported in the browsers  See below for more info  The third misconception is that Socket IO downgrades the connection as a fallback on older browsers  It actually assumes that the browser is old and starts an AJAX connection to the server  that gets later upgraded on browsers supporting WebSocket  after some traffic is exchanged  See below for details    My experiment  I wrote an npm module to demonstrate the difference between WebSocket and Socket IO    https   www npmjs com package websocket-vs-socket io https   github com rsp node-websocket-vs-socket io   It is a simple example of server-side and client-side code - the client connects to the server using either WebSocket or Socket IO and the server sends three messages in 1s intervals  which are added to the DOM by the client   Server-side  Compare the server-side example of using WebSocket and Socket IO to do the same in an Express js app   WebSocket Server  WebSocket server example using Express js   var path   require  path    var app   require  express      var ws   require  express-ws   app   app get       req  res    gt      console error  express connection      res sendFile path join   dirname   ws html         app ws       s  req    gt      console error  websocket connection      for  var t   0  t  lt  3  t        setTimeout      gt  s send  message from server       gt      1000 t       app listen 3001       gt  console error  listening on http   localhost 3001      console error  websocket example      Source  https   github com rsp node-websocket-vs-socket io blob master ws js  Socket IO Server  Socket IO server example using Express js   var path   require  path    var app   require  express      var http   require  http   Server app   var io   require  socket io   http   app get       req  res    gt      console error  express connection      res sendFile path join   dirname   si html         io on  connection   s   gt      console error  socket io connection      for  var t   0  t  lt  3  t        setTimeout      gt  s emit  message    message from server    1000 t       http listen 3002       gt  console error  listening on http   localhost 3002      console error  socket io example      Source  https   github com rsp node-websocket-vs-socket io blob master si js  Client-side  Compare the client-side example of using WebSocket and Socket IO to do the same in the browser   WebSocket Client  WebSocket client example using vanilla JavaScript   var l   document getElementById  l    var log   function  m        var i   document createElement  li        i innerText   new Date   toISOString       m      l appendChild i     log  opening websocket connection    var s   new WebSocket  ws     window location host       s addEventListener  error   function  m    log  error        s addEventListener  open   function  m    log  websocket connection open        s addEventListener  message   function  m    log m data         Source  https   github com rsp node-websocket-vs-socket io blob master ws html  Socket IO Client  Socket IO client example using vanilla JavaScript   var l   document getElementById  l    var log   function  m        var i   document createElement  li        i innerText   new Date   toISOString       m      l appendChild i     log  opening socket io connection    var s   io    s on  connect error   function  m    log  error        s on  connect   function  m    log  socket io connection open        s on  message   function  m    log m         Source  https   github com rsp node-websocket-vs-socket io blob master si html  Network traffic  To see the difference in network traffic you can run my test  Here are the results that I got   WebSocket Results  2 requests  1 50 KB  0 05 s  From those 2 requests    HTML page itself connection upgrade to WebSocket    The connection upgrade request is visible on the developer tools with a 101 Switching Protocols response    Socket IO Results  6 requests  181 56 KB  0 25 s  From those 6 requests    the HTML page itself Socket IO s JavaScript  180 kilobytes  first long polling AJAX request second long polling AJAX request third long polling AJAX request connection upgrade to WebSocket   Screenshots  WebSocket results that I got on localhost     Socket IO results that I got on localhost     Test yourself  Quick start     Install  npm i -g websocket-vs-socket io   Run the server  websocket-vs-socket io   Open http   localhost 3001  in your browser  open developer tools with Shift Ctrl I  open the Network tab and reload the page with Ctrl R to see the network traffic for the WebSocket version   Open http   localhost 3002  in your browser  open developer tools with Shift Ctrl I  open the Network tab and reload the page with Ctrl R to see the network traffic for the Socket IO version   To uninstall     Uninstall  npm rm -g websocket-vs-socket io   Browser compatibility  As of June 2016 WebSocket works on everything except Opera Mini  including IE higher than 9   This is the browser compatibility of WebSocket on Can I Use as of June 2016     See http   caniuse com websockets for up-to-date info

User · Answer

Using Socket IO is basically like using jQuery - you want to support older browsers  you need to write less code and the library will provide with fallbacks  Socket io uses the websockets technology if available  and if not  checks the best communication type available and uses it

User · Answer

Even if modern browsers support WebSockets now  I think there is no need to throw SocketIO away and it still has its place in any nowadays project  It s easy to understand  and personally  I learned how WebSockets work thanks to SocketIO    As said in this topic  there s a plenty of integration libraries for Angular  React  etc  and definition types for TypeScript and other programming languages   The other point I would add to the differences between Socket io and WebSockets is that clustering with Socket io is not a big deal  Socket io offers Adapters that can be used to link it with Redis to enhance scalability  You have ioredis and socket io-redis for example   Yes I know  SocketCluster exists  but that s off-topic

User · Answer

tl dr  Comparing them is like comparing Restaurant food  maybe expensive sometimes  and maybe not 100  you want it  with homemade food  where you have to gather and grow each one of the ingredients on your own  Maybe if you just want to eat an apple  the latter is better  But if you want something complicated and you re alone  it s really not worth cooking and making all the ingredients by yourself   I ve worked with both of these  Here is my experience  SocketIO  Has autoconnect  Has namespaces  Has rooms  Has subscriptions service  Has a pre-designed protocol of communication  talking about the protocol to subscribe  unsubscribe or send a message to a specific room  you must all design them yourself in websockets   Has good logging support  Has integration with services such as redis  Has fallback in case WS is not supported  well  it s more and more rare circumstance though   It s a library  Which means  it s actually helping your cause in every way  Websockets is a protocol  not a library  which SocketIO uses anyway   The whole architecture is supported and designed by someone who is not you  thus you dont have to spend time designing and implementing anything from the above  but you can go straight to coding business rules   Has a community because it s a library  you can t have a community for HTTP or Websockets  P They re just standards protocols    Websockets  You have the absolute control  depending on who you are  this can be very good or very bad It s as light as it gets  remember  its a protocol  not a library  You design your own architecture  amp  protocol Has no autoconnect  you implement it yourself if yo want it Has no subscription service  you design it Has no logging  you implement it Has no fallback support Has no rooms  or namespaces  If you want such concepts  you implement them yourself Has no support for anything  you will be the one who implements everything You first have to focus on the technical parts and designing everything that comes and goes from and to your Websockets You have to debug your designs first  and this is going to take you a long time  Obviously  you can see I m biased to SocketIO  I would love to say so  but I m really really not  I m really fighting not to use SocketIO  I dont wanna use it  I like designing my own stuff and solving my own problems myself  But if you want to have a business and not just a 1000 lines project  and you re going to choose Websockets  you re going to have to implement every single thing yourself  You have to debug everything  You have to make your own subscription service  Your own protocol  Your own everything  And you have to make sure everything is quite sophisticated  And you ll make A LOT of mistakes along the way  You ll spend tons of time designing and debugging everything  I did and still do  I m using websockets and the reason I m here is because they re unbearable for a one guy trying to deal with solving business rules for his startup and instead dealing with Websocket designing jargon  Choosing Websockets for a big application ain t an easy option if you re a one guy army or a small team  I ve wrote more code in Websockets than I ever wrote with SocketIO in the past  and all I have to say is     Choose SocketIO if you want a finished product and design   unless you want something very simple in functionality

User · Answer

Socket IO uses WebSocket and when WebSocket is not available uses fallback algo to make real time connections

User · Answer

https   socket io docs  What-Socket-IO-is-not  with my emphasis      What Socket IO is not      Socket IO is NOT a WebSocket implementation  Although Socket IO indeed uses WebSocket as a transport when possible  it adds some metadata to each packet  the packet type  the namespace and the packet id when a message acknowledgement is needed  That is why a WebSocket client will not be able to successfully connect to a Socket IO server  and a Socket IO client will not be able to connect to a WebSocket server either  Please see the protocol specification here      WARNING  the client will NOT be able to connect  const client   io  ws   echo websocket org

User · Answer

Its advantages are that it simplifies the usage of WebSockets as you described in  2  and probably more importantly it provides fail-overs to other protocols in the event that WebSockets are not supported on the browser or server  I would avoid using WebSockets directly unless you are very familiar with what environments they don t work and you are capable of working around those limitations   This is a good read on both WebSockets and Socket IO   http   davidwalsh name websocket

[node.js] Differences between socket.io and websockets

Examples related to node.js

Examples related to google-chrome

Examples related to firebug

Examples related to websocket

Examples related to socket.io