Breaking the Code Behind Realtime Collaboration With Websockets

Hello, I'm here to tell you about the code behind collaborative components. I'm Vitor Norton. I'm Brazilian. I'm 10 times Microsoft MVP. I'm also a developer advocate here at SuperViz. But that doesn't say much about me. I prefer to say that I'm passionate about connecting people, that I'm highly dependent of my productivity tools, and I love the idea of working anywhere in the world.

So working remote for me is my top priority. And this makes me increasingly connected with my devices. And actually, I think it's not only me. We are increasingly connected through our devices, right? And we all have some goals. Like, we don't want more meetings. We want to work remotely. But we also do not want to show alone. And how do we achieve that? How do we solve that?

Let me ask JPT for a bit to see what companies have done this and have solved this issue. One of the greatest examples I can bring is the Gather Town. That's a collaborative suite that you can almost play a game, right? That you have this desk where everybody in your team is, and you can go to the desk and talk to people. But they bring this game interactive mode to work to a workplace. And this makes us feel less alone and still kind of free to reach out to other people that we see that, oh, there's in the desk, let me talk to them. Another company that had made this is Miro. Who had added... I'm sure you've seen this all over other products like Figma, that you can see mouse pointers, you can see comments. If someone does something here, you will see on the other screen, you can see who is online. All of these components. We also have chat applications. And let's be honest, we all use a lot. We also have another example is Microsoft Teams that you can see which presentations people are using. And if they accept it, if they're online, offline, you can see anything in a glance before you start a meeting, right? So you feel less alone in that meeting. You see who is going to be there, who is already there. Another one is Uber.

Or if you have, at least in Brazil, we have this huge app that you can see a delivery guy bringing things to your door. At Uber, you can see the car driving and you see this real-time update going on. So all of this is what we call collaborative collaboration components. And let's break down this a little bit more.

Let's see some examples of these collaborative components. We have form elements that allow two people on the same page to type simultaneously, with one person's typing being visible to the other person. There's also the 'who is online' component, which shows if someone has viewed a shared document, allowing for better collaboration. Another useful component is the mouse pointer sync, which enables easy communication by synchronizing mouse positions across devices. Additionally, contextual comments can be added to any location on a page, facilitating real-time collaboration. Let's focus on the mouse pointers component and explore how it works.

The mouse pointers component is a simple React component that utilizes a room concept. A room is like a virtual meeting space or a shared file, where all participants are synced together. Each participant has an ID, usually an email or a UID, and a name. By creating a new instance of the mouse pointers component and passing in the element and room, the mouse pointers are synchronized among participants. The component's main functionalities include tracking the position of other participants' mouse pointers, updating the user's own pointer position, and ensuring smooth and lag-free synchronization.

To achieve these functionalities, the mouse pointers component utilizes state to store the position information, and a channel to subscribe and listen for updates. The state consists of the X and Y position of the mouse pointer. The component listens for movements of other participants' mouse pointers and updates the user's own position to inform others. It also focuses on achieving fast and smooth synchronization to provide a seamless collaboration experience.

What is a room? A room is the place that you enter in a Google Meeting, in Microsoft Teams, or in a file in Figma, for example, you have the idea of the room that everybody that is at this room will be synced together all the content, then you have the participant, the ID that usually is the email or some UID, and the name. Then you just create a new mouse pointers, passing the element, add it to the room, and it syncs and it does the whole magic.

But let's go even deeper than that. And let's see what is this mouse pointers? And how does this work between all of these devices? Well, the mouse pointers has three main functionalities. You see when someone moves their mouse, so you get the information about the position of other participants' pointers. You update your position to everyone, so you let everyone know about where your mouse is. And then you have to make it really fast and smooth, so it doesn't seem laggy, right? So let's see how we do each one of these.

The first one, we have this state here. This is a React thing, but you can be a simple JavaScript object with an X and a Y position. And we have this channel. I will talk more about it later, that I'm subscribing, that I'm listening. I'm also going to talk more about it later. One event called mouse move. When I hear something of this event, then I use this callback function on mouse move. When this callback function is triggered, I received a message. The message contains a data, and the data contains an X and a Y, and I set the mouse position to this position. And then you have to, of course, do the whole styles and the whole position top, salute, or something like that. But this is the mechanism behind it.

On the other side, we have to update our position to everyone. So we listen to the document on mouse move, same thing, same callback, that we received an event. We take the client X, the client Y to a position variable, and then we publish it. So we publish to the same event that we've seen before, the mouse moved, so everyone hears about it. Okay, now the heart. Make it really fast and smooth. Okay, so this is the same code that we've seen before, but with something else added, a native API from JavaScript that is requestAnimationFrame, that we make sure to update it in 30 FPS. But that's not the point here. Okay, let's move on.

What is this channel? Where does this come from? So the channel, we have this rule, we create a new real-time. Okay, so this real-time is a component that we sync data between devices and between users. On this real-time, we can connect to a channel.

We can connect to the mouse handler channel. So this channel is everything related to mouse pointers. We can have a channel for seeing which line, we can have a channel for seeing the network of the other person to see if they are with bad networking or not. And then we add this real-time to our room. So it syncs between everyone.

Okay, so what is this channel? The channel has a subscribe, it has a publish, and that's it. Okay, so let's ask JPT. Wait, no, I don't need to ask JPT this. I know what this is. You know what this is, right? This is a PubSub. This is the PubSub pattern. The publish subscriber is one of the design patterns and it's exactly this. So let's see the code behind this pattern and see how this works.

So on the subscribe method, we see, let me go back here just a little bit to showcase this static object called event. This will be a graph object, okay? And this will be relevant to us when you see what's going on, on the subscribe and on the publish. So when I subscribe to something, I have a name of the event, then I have a callback, and I do a lot of things. To make it easier to understand, I will mark the event name here for us to understand it better, okay? So I'm receiving a mouse move and a callback.

So if this graph object event has a mouse move, then I will go with my code. If it doesn't, I will create an empty array, okay? So we have an event with mouse move with an empty array. And then once I check this, I can push the callback to this array. So every time someone subscribes to mouse move, then it goes to this array. And then let's see what the publish is about. The publish, you receive the event name and then the data that you want to publish. Again, I will mark this a little bit to make it easier to understand. So when you push mouse move, you receive your data, and then you go to the event, and you see the event mouse move there and for each item of this array, you call the callback function that it has there, that you have pushed with the data. That's it. That's how it's done. Well, it is this, but it has something more. It has one more thing going on here. Because all of this works in a local environment in the same instance.

If you do this with another browser, this pubsub, it will not sync between the two instances of that browser. You have to have something to communicate in between the instances among the instances. Something else, and that is WebSockets.

What is WebSockets? Well, WebSockets provides a protocol that allows continuous two-way communication between client and the service, enabling real-time communication. How does this work? The client initiates a call. The client initiates a WebSocket handshake with the server, and once established, the message can be sent in both directions without needing to reestablish the connection.

It's different from the HTTP request that you call something, you get something, you put something, you post something, and it does the whole handshake. It closes the connection, stuff like that. This keeps open. The connection does not close. It has a persistent connection. Because of that, it has low latency. It's ideal for chat, gaming, and live updates, and also is bidirectional. Both client and server can send a message without needing the other one to do anything. But this leads us to a problem.

Let's say that on the server I have this counter equals zero, and both devices that are connected say the counter now is one, and they say this at exactly the same time. How do we handle this? It's just counter one? I don't think so, because one is saying one, the other is saying another. This counter in total should be equals to zero. We use CR-DTS. That is a conflict free data-related type. It's a special type of data structure that lets you synchronize things among devices.

This is one of the most important things that we need to learn in these times, because I think it's going to be a lot of work. It's going to be a really standard thing moving forward in software development. On the one side, I have this counter, and it's not just a simple plain number. It's an object containing an URID with the value one, and on the other side, another URID with the same value one. This ID is different, and that allows you to see both numbers without conflict when you want to count it. When you want to count it, you just count these values.

It's a bit more complex object, but it solves everything. There is more to it, of course, but you get the idea. It has its own criterias, its own rules, but this is a really glance of WebSockets and this conflict-free data-related types. I will show you some resources. This CRDT-R Collaborative Protocol of the Future, written by Piyush Pourwell. I hope I'm reading right his name. This article is available at Medium, and I think it's a great article. Talking about resources, I'm also referencing the Learning JavaScript Design Patterns by Addy Oslanyi. This book is really amazing, really simple to understand. I also reference this How to Use WebSockets with Flutter, that's an article on DevTool. I reference this even though this is a JavaScript conference, but because the explanation of WebSockets for me was one of the best ones, this simple and straightforward and with some amazing illustrations, including the ones that I use here. Another article is the Understanding and Implementing Event-Driven Communication and Development, an article by me, also available at DevTool.

Okay, I think this is it. Thanks so much for watching. See ya! Microsoft Mechanics www.microsoft.com.