Prajwal BM

DAY 2: worked on the client side ws connection. - I used to write inline code where I put the logic of ws connection in the useeffct and make a connection, but this had some downsides like ws instance being created on each rerender. - So I learnt and used a different code structure in the client side for the first time. I used oops structure to create a service class of ws, and used custom hooks to bridge the ws with a react component. By doing so we keep the main logic in the service class, and bridging logic in the hooks which run in components life cycle , used zustand for global state management and kept the react component purely UI. - Built a basic UI where it renders each peer connecting to the websocket server, right now im using different browser tabs as peer and they are grouped into a room automatically as they are in the same IP. - we can see that the peers appear on the screen with their random name and device type, where one peer can select the peer they want to share the data with. Next up: will add webrtc logic of ice candidates, stun servers and connect the peers to share the data with data channel.

Got some time to continue my project ( actually begin ) Read this till the end I got some learnings to share which are amazing. DAY 1 : Initialized server (nodejs,ts,ws) and client(react,ts,zustand,websockets,webrtc). - Created the server side logic for room management and signaling with websockets. - Every client is a new Peer and on the websocket connection establishment they are grouped into rooms so that one peer is able to see other peers in the same room. - Basically room is used to group the peers so that they find each other in the particular room by joining a room. - Used signaling logic to send and broadcast the joining, leaving and finding new peer using websocket objects methods. next up - will implement client side and some message formats for communicating the offers and answers. Learnings : - I learnt the actual difference between using OOPs and function style. the core of it is not performance its about state control and architecture discipline. I knew about OPPS concept but this is my first time using it in action. - Why we had to choose Map over normal array and objects for room variable in the RoomManager object?. rooms: Map>. so why Map? lets say the rooms variable is an array of objects, every time you wanted to find a room, you would have to use .find() or a for loop. You have to check every single item. If you have 1,000 rooms and the one you want is at the end, you just did 1,000 operations. But in the Map you say rooms.get('101') and the computer goes instantly to that spot in memory. While Map and object both store key-value pair, but the key types in object is strictly string, and in Map it can be of any type. Using Map is a performance decision and it has better methods like .set() .get() .delete() and all. That's it for today will have some more learning on DAY 2.

Touch glass 💻🌎