DEV Community

Socket.io: Making Web Sockets a Piece of Cake!

Ali Spittel on December 03, 2017

This week, I decided to learn about websockets because they are super cool. According to MDN, websockets “make it possible to open an interactive c...
Collapse
 
bengreenberg profile image
Ben Greenberg

You inspired me to learn about websockets now, thanks for this!

Collapse
 
courier10pt profile image
Bob van Hoove • Edited

Oh that's a great subject. I've seen situations where it could make for a much more user friendly experience. Thanks for writing and inspiring me to revisit this option!

I just did some research to see what the current options are when using .Net.

SignalR seems to be a great tool to start with bi-directional communication. It requires a jQuery plugin to get things working. The advantage is that it provides 'fallbacks' for browsers that do not support websockets.

But with websockets adoption improving, a jQuery plugin might be more than your really need. I would rather use a a library that just relies on websockets.

Collapse
 
askthepunkuzz profile image
Punkuzz

I've found SignalR to be cumbersome and complicated or may be its just me.

Collapse
 
courier10pt profile image
Bob van Hoove

I have tried to create a 'Spike' project several years ago and I arrived at the same conclusion, it felt like more than I bargained for.

But it might be worth another try. Perhaps somebody could suggest a lightweight alternative for .Net?

Collapse
 
nishchit14 profile image
Nishchit

Great article Ali, I'm very excited for Socket and realtime material.

I coudnt stop my self to debug this live app, It could be possible with the firecamp.app

Thanks again for the sharing your knowledge :clap: :clap: :clap:

tested on firecamp

Collapse
 
pilatdennis profile image
Dennis

I also think Socket.io is fascinating! I completed a course on PluralSight not too long ago. The course although not entirely about Socket.io, introduced it as a module and I found it interesting!

I'll definitely learn more about it! When they describe it as allowing real-time communication... It reminds me of E-Commerce support chats.

Collapse
 
aspittel profile image
Ali Spittel

Yeah! It's so cool!

Collapse
 
bgadrian profile image
Adrian B.G.

I remember tring websockets before release, in draft10 I think, on PHP, it was ..almost working.

Anyway, if you want to learn about websocket why didn't you used vanilla JS? is easy nowdays, at least you would have learned how they are implemented, and then in a commercial project you would use a library like socket.io.

Collapse
 
aspittel profile image
Ali Spittel

The program I work for teaches socket.io, so I thought it would be most value for me. Maybe a different week I will look into that.

Collapse
 
sahilatahar profile image
Sahil Atahar

Nice article, 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
 
hkly profile image
hkly

Thanks for the write-up! I was a little intimidated to look into websockets before, but now I feel like maybe it's something I could tackle.

I tried out your app and I was wondering if there was a way to show filled pixels on load, rather than empty pixels that updated with changes after you loaded. So something more similar to the reddit version where a user could come in and see what has already been drawn.

Collapse
 
aspittel profile image
Ali Spittel

Awesome! It would definitely be do-able, you would just need to connect a database. I didn't feel like doing so for this quick project, but it would be easy enough to read in those initial values! The Reddit one is actually open source if you are interested in it!

Collapse
 
z0al profile image
z0al • Edited

Yeah, websockets are really amazing and easy to use. I used it back in 2015, with Python backend, but I always interested learning how to do the same using Node.js, now I know how, thank you :)

Collapse
 
aspittel profile image
Ali Spittel

For sure! Did you use Django Channels or something else?

Collapse
 
z0al profile image
z0al

I used Tornado, it was simple enough for my purpose. I had no experience with Django back then anyway ;)

Collapse
 
lpasqualis profile image
Lorenzo Pasqualis

Nice! Love it! Thank you.

Collapse
 
dulan666 profile image
Dulan

Great post! thanks!

Collapse
 
jochemstoel profile image
Jochem Stoel

Ali, you should look into WebRTC next. It enables direct 'peer to peer' communication between clients without a server in between. :)

Collapse
 
aspittel profile image
Ali Spittel

Ah, awesome, thanks! I hadn't heard of this!

Collapse
 
monu180 profile image
Monu Kumar

Well written.