Breaking the Code Behind Realtime Collaboration With Websockets

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Figma, Google Docs, Miro, and several other tools allow you to see in real time what a person is doing, but how? In this talk, you’ll get to know the concept of event-brokers, pubsub design pattern, web sockets. We will unravel these features and understand how to make them.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

FAQ

Vitor Norton is a Brazilian developer advocate at SuperViz and a 10-time Microsoft MVP, passionate about connecting people and remote work.

Collaborative components are tools that enhance real-time collaboration and connectivity among users, such as mouse pointers sync, online status indicators, and real-time updates in applications like Gather Town and Miro.

The mouse pointer feature works by synchronizing the position of users' cursors in real-time using a combination of React components, event listeners, and WebSockets for fast, bidirectional communication.

The PubSub pattern, or publish-subscribe pattern, is a design pattern where messages are sent (published) and received (subscribed) by parties in a system, facilitating asynchronous and decoupled communication.

WebSockets enable continuous two-way communication between clients and servers, allowing real-time updates with low latency and persistent connections, ideal for chat and live updates.

CRDT, or Conflict-Free Data Types, is a data structure that allows synchronization of data across devices without conflicts, crucial for building reliable real-time collaborative applications.

Examples include Gather Town for a game-like interactive workspace, Miro for collaborative whiteboarding, Figma for design collaboration, and Microsoft Teams for meeting coordination.

Vitor Norton values remote work because it allows him to work from anywhere in the world, aligning with his passion for connecting people and utilizing productivity tools.

Resources include "CRDT-R Collaborative Protocol of the Future" by Piyush Pourwell on Medium, "Learning JavaScript Design Patterns" by Addy Oslanyi, "How to Use WebSockets with Flutter" on DevTool, and "Understanding and Implementing Event-Driven Communication and Development" by Vitor Norton.

Vitor Norton
Vitor Norton
20 min
21 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hello, I'm Vitor Norton, a developer advocate at SuperViz. I'm passionate about connecting people, highly dependent on my productivity tools, and love the idea of working anywhere in the world. Working remotely is a top priority, but we also don't want to feel alone. Let's explore some examples of companies that have addressed this issue: Gather Town, Miro, and Microsoft Teams. Collaborative components enable real-time collaboration by synchronizing participants' actions. The mouse pointers component utilizes a room concept to synchronize mouse positions. Channels and WebSockets are used for real-time data synchronization. CR-DTS is a conflict-free data-related type used to handle counter conflicts in collaborative environments.

1. Introduction to Collaborative Components

Short description:

Hello, I'm Vitor Norton, a developer advocate at SuperViz. I'm passionate about connecting people, highly dependent on my productivity tools, and love the idea of working anywhere in the world. Working remotely is a top priority, but we also don't want to feel alone. Let's explore some examples of companies that have addressed this issue: Gather Town, Miro, and Microsoft Teams.

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.

2. Understanding Collaborative Components

Short description:

Collaborative collaboration components, such as form elements, 'who is online' components, mouse pointer sync, and contextual comments, enable real-time collaboration. Let's focus on the mouse pointers component, which utilizes a room concept to synchronize participants' mouse positions. By tracking and updating positions with state and a channel, smooth synchronization is achieved.

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.

3. Understanding Mouse Pointers and Channels

Short description:

A room is a place where participants are synced together and collaborate. The mouse pointers component has three main functionalities: tracking other participants' mouse positions, updating the user's own position, and ensuring smooth synchronization. The component utilizes state and a channel to achieve these functionalities. The channel allows for real-time data synchronization between devices and users.

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.

4. Exploring Mouse Handler Channels

Short description:

We can connect to the mouse handler channel for mouse pointers. The channel follows the Publish-Subscribe pattern, where events are subscribed to with callbacks. The events and their associated callbacks are stored in a graph object. When an event is published with data, the associated callbacks are called. This mechanism operates in a local environment within the same instance.

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.

5. WebSockets: Enabling Real-Time Communication

Short description:

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. WebSockets provide a protocol for continuous two-way communication between client and the service, enabling real-time communication.

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.

6. Handling Counter Conflicts with CR-DTS

Short description:

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. We use CR-DTS, a conflict-free data-related type, to synchronize things among devices. It's a bit more complex object, but it solves everything. I will show you some resources, including the CRDT-R Collaborative Protocol of the Future by Piyush Pourwell and the Learning JavaScript Design Patterns by Addy Oslanyi.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced 2021React Advanced 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
Understanding React’s Fiber Architecture
React Advanced 2022React Advanced 2022
29 min
Understanding React’s Fiber Architecture
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Thinking Like an Architect
Node Congress 2025Node Congress 2025
31 min
Thinking Like an Architect
Top Content
In modern software development, architecture is more than just selecting the right tech stack; it involves decision-making, trade-offs, and considering the context of the business and organization. Understanding the problem space and focusing on users' needs are essential. Architectural flexibility is key, adapting the level of granularity and choosing between different approaches. Holistic thinking, long-term vision, and domain understanding are crucial for making better decisions. Effective communication, inclusion, and documentation are core skills for architects. Democratizing communication, prioritizing value, and embracing adaptive architectures are key to success.

Workshops on related topic

Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
React Patterns Made Simple
React Day Berlin 2024React Day Berlin 2024
62 min
React Patterns Made Simple
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Learn widely used React patterns, including HOCs, Compound Components, Provider Patterns, Functions as Child, and Portals, to write cleaner, more efficient code and create scalable, maintainable applications.Overview In this workshop, viewers will learn about key React patterns that can make their code more efficient, readable, and maintainable. We'll introduce each pattern, explain how it works, and demonstrate practical examples. By the end of the session, participants will have a solid understanding of how to use these patterns in their projects.Learning GoalsHOCs Compound Components Provider Patterns Functions as Child Portals Modularity Maintainability Real-world Application.
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.
Best Practices and Patterns for Managing API Requests and States
React Advanced 2022React Advanced 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
Thomas Findlay
Thomas Findlay
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.