Week-4&5 Setting up socket connection and Sending changes

Overview

In week 4, I focused on implementing the server-side and client-side logic to make a connection between the local server and Music Block’s client. Also, I implemented a functionality to limit the calls in case the local server is not running. In week 5, I defined five changes we must collaborate on and started implementing from the first one.

Setting up the Socket connection

To set up the socket connection, I have initialized a new file collaboration.js and added the logic to make a socket call to connect to a socket server. As we are in the development phase of the project, I have used http://localhost:8080/ as the URL. Later on, we will replace this URL with Music Block’s one.

After the implementation, when a user connects, the socket logs the auto-generated ID of the user and when a user disconnects, the socket logs the ID of the disconnected user as well.

I’ve also planned to add room logic here but reconsidered it. As of right now, the priority is to get an MVP version of the project so diverted the focus to implementing the functionality of sending/receiving changes of a project.

Sending changes to the server

As I have mentioned earlier, I along with Mentor Walter’s suggestion defined five types of changes that we want to collaborate on. These changes are as follows -

1. Adding a block (to the interface)
2. Connecting a block (in the stack)
3. Removing a block (from the interface)
4. Disconnecting a block (from a stack)
5. Change the value of a block

I will implement these one by one so first I’ll be implementing the first one. For this, I discussed it with my mentor and learned that blockListof activityholds the current instance of the project that is displayed on the screen. This way I’ll track the changes made in the blockListand send those changes to all the clients connected through a socket server.

Conclusion

This week I’ll finish up the functionality to send the changes and apply those changes to other clients. In further implementation, I’ll implement room logic and a trigger that initiates the socket connection. As of now, the socket connection gets initiated automatically when the project is loaded.