Replay a WebSocket Chat Conversation with Mock Service Worker

[00:00] Our event handler gives us full control over the WebSocket communication, so we can reproduce all sorts of network scenarios. For example, let's replay a chat conversation between two mock users. To do that, declare a new variable called John, and assign it an empty object that satisfies the user type that our application already has. Provide the properties needed for this user like the name property being John and avatar URL being public slash avatars one JPEG and also an ID and I will use an existing create ID utility. Copy this object and create a new user called Emily, adjusting the data accordingly.

[00:45] Now that we have our mock users, let's create the chat messages for them. I'll create a new variable called johnMessages, which is an array of strings. And I will paste in the messages that John will send in the chat. I will do the same for Emily, Emily messages, area of strings, and the messages from Emily. Now go to the connection listener over here, and let's, on the root scope of this listener, let's iterate over the John messages.

[01:14] So, Grabbing a particular John message by index. Then call client.send to send this message to this connected client, providing an object that satisfies the chat message payload type you already have, define the type message for this as message, and data being the actual message being sent. Here we're going to have author equal John, the text of the message equal to John message, the sent at to be date dot now, and also create an id for this message using the same createId utility. Because we can only pass strings, blobs, or buffers via the WebSocket protocol, let's wrap this message object in json.stringify. Like so.

[02:05] Now we can see both messages from John arriving in the chat, but they happen at the same time, which is not very realistic. Let's add a bit of a delay to how these messages are sent. Head back to the file and import the delay function from MSW. Now before we're sending this message from John, let's await a delay with 500 milliseconds as the duration and also after the message is sent, let's await another delay for 1000 milliseconds. Since the delay function is asynchronous and we want to await it, let's mark our entire connection listener as an asynchronous function.

[02:42] We can see now that the messages arrive one after the other, emulating a more realistic human-like typing. Next, let's check if there's any Emily messages in response to John's. I'll create a variable called EmilyMessage and try to look up the Emily message by the same index. If it exists, I will send it to the client using the same client on send. I will copy this JSON stringify payload here and I will adjust the messages author to be Emily and the message to be Emily message.

[03:14] To make this message more realistic, I will also add another delay of 1000 milliseconds. And now we can see an entire conversation play out between John and Emily, which are both non-existing users. And of course, our own message handling still works. Thank you.