Websockets (wss) is a protocol that allows for live updates. This could allow you to see live direct messages from other users, chatrooms, stock tickers and other live social feeds, games and more.
Please chat with a teacher or mentor if you are unsure if websockets is worth adding to your app.
We highly recommend that you do not use the built in JavaScript Websocket objects/API, but instead use the Socket.io library to add websockets to your app.
We also highly recommend that you implement a simple chatroom in your website with Socket.io first, to fully understand how the technology works. From there, it is very easy to adjust the existing chatroom into whichever use you require. Exception: if you plan on connecting to a third party api with websockets (uncommon).
-
- the library you should be using to actually add websockets to your app
- Implementing Socket.io with React https://socket.io/how-to/use-with-react
-
Socket.io + ReactJS Tutorial | Learn Socket.io For Beginners | https://www.youtube.com/watch?v=djMy4QsPWiI
- Soldi youtube tutorial for socket.io
-
In websockets, you don't have the standard "request-response".
-
Client's (user's browser's) connect or "subscribe" to channels on the backend. Like a long term connection to an api endpoint.
-
Once subscribed, a client/browser/react frontend can send emits (i.e. websocket version of fetch) whenever they want, and the backend can emit data to the client whenever they want.
-
Instead of having router's, you have "event listener's" that are like a mix between a React event listener and an api endpoint
-
In React, instead of fetch requests, you "emit", but the concept is roughly similar.
-
Most students make their event-listeners (websocket endpoints) in the server/src/app.js, but like routers you could move your eventListeners into their own files.
-
Most student apps have some version of a "room" or "channel" that a user joins. A room could allow two players to message one another like in a facebook DM, chat amongst a many-person chatroom, or otherwise interact only with a few select user's rather than an open room for all.
- it is more than possible to connect your app to an external API's channel, and documentation exists for various APIs so that you can pull data using websockets rather than
gotorfetch. - However, take note that many of these third party apis require you to also use GraphQL, which takes a good while to learn.
These apps are ordered by most accessible to a student in the breakable toy phase of the program. The further down the least, the less helpful the websockets implementation may be (either due to the code needing some refactoring, or the codebase being so complex).
https://github.com/ttdotsh/grumbl https://github.com/ttdotsh/grumbl/blob/main/server/src/app.js https://github.com/ttdotsh/grumbl/blob/main/client/src/components/room/RoomCreator.js
Websockets implemented for joining a "room" or group for friends, and then voting on restaurants from yelp that the friends could go to. Websockets also facilitates getting the restaurants to vote on, and the voting itself.
https://github.com/JasperGroner/chess/blob/main/server/src/app.js
Note, this might be too large an app to make sense of. I'll be honest, this app SHOULD be intimidating, as it is regarded by the team as the most comprehensive, app rich, best designed breakable toy in our history. It's got a lot of great abstractions, but websockets is also used for all "fetch" type requests, from joining matches, making moves and replaying past moves.
A trick based card game turned digital. Its not unlike Hearts. Bob's implementation is a bit wild at times, and the app isnt fully finished, but it is impressive. Websockets for joining games and making moves, but could probably be handled differently.