How I brought Yahoo Chat back to life in 5 hours: Part 2 — The WebSocket
By: Alexandria Pugia
Tags: Tutorial, Engineering, Web Development, React, Redux

What is a WebSocket?

Ah, the question that has been haunting me for longer than I’d like to admit. What is a WebSocket and why are we going to be using it? The following definition is from wikipedia.

WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection.

Basically, it allows a browser to connect to a WebSocket server to transfer data back and forth. If you’re still not getting it, think of messages sending and receiving in a chat room. HEY, wait, that’s exactly what we’re going to be doing with it!

WebSocket Server Setup

We are actually going to be making a new directory for our backend in our current project’s root directory. Once it’s made, we will need to install a WebSocket client called ws (docs) and create a server.js file.

mkdir chatroom-backend

cd chatroom-backend yarn add ws

touch server.js

The server.js file is what our WebSocket is going to run on in a backend server-type situation. Since we already added ws to our backend, we’re going to create a WebSocket object and then create a server object on port 3030.

After that, we’re going to check if the socket is on, if there’s a connection, and then broadcast all messages to each connected WebSocket clients, including itself, using the 12 lines of code below. This is the entire backend portion of the WebSocket set up! This, admittedly, is what I struggled with the most.

//server.js const WebSocket = require('ws');

const socket = new WebSocket.Server({ port: 3030 }); socket.on('connection', ws => {

ws.on('message', data => {

socket.clients.forEach(client => {

if (client.readyState === WebSocket.OPEN) {

client.send(data)

}

})

})

})

Adding The Server Event Listeners

We have our WebSocket set up, but the frontend doesn’t know about it yet. I went to my TextBox component and defined socket as the url we defined before in the backend so that we can access it and add onOpen, onMessage, and onClose listeners.

//TextBox.js socket = new WebSocket('ws://localhost:3030')

Component Layout (just in case you forgot!)

Now, I added all of this into the TextBox component because that was the thing that was going to be sending the messages. I definitely could have thought this out better and maybe passed it down through props, but my 5 hour deadline was coming to a close and I was ready to get this project checked off my list!

I added the following code to my form’s handleSubmit function. It takes the message that the user typed and sends it to the server. The code in server.js takes it and broadcasts it to every single user, therefore sending the message to all the connected clients! YAY!

//TextBox.js //send message to the WebSocket

this.socket.send(JSON.stringify(messageObject))

this.socket.onopen broadcasts the username to all the connected clients. I ran into a bug where already-connected users don’t populate on new user’s “Users:” lists, but would like to revisit this project as a whole and see if I could add a way to store connected users on the WebSocket itself! I’m sure there is, but I couldn’t find any documentation on it.

this.socket.onmessage takes the message and dispatches it to state. I’m passing this.props.users because I created a workaround for the bug I mentioned before that automatically adds users to your user list after they send a message if they weren’t on there before!

this.socket.onclose attempts to reconnect to the server if your connection is somehow disconnected on accident, but then removes you from the list of users if it doesn’t succeed.

//TextBox.js componentDidMount() {

this.socket.onopen = () => {

//sends username to server for welcome message

this.socket.send(JSON.stringify(this.props.username))

} this.socket.onmessage = (e) => {

const message = JSON.parse(e.data) //this came from dispatchStateToProps

this.props.handleNewMessage(message, this.props.messages, this.props.users)

} this.socket.onclose = () => {

//attempts to reconnect to server if disconnected on error

this.setState({

socket: new WebSocket('ws://localhost:3030'),

}) this.props.handleClose(this.props.users, this.props.username)

}

}

The Final Result

From NewUser377’s POV

From NewUser839’s POV

Somehow I got it all to work, and gosh darn it did it feel good. Is it perfect? No. Would I like to come back to this project and make it a thousand times better? Yes! Did I conquer my arch nemesis, the WebSocket, and learn how to use them? You bet your cute behind I did!!!

How to Start Up Your WebSocket

There’s only two easy steps to getting everything online!

cd chatroom-frontend

yarn start

and

cd chatroom-backend

node server.js

If you want to see and follow along with my code, you can find it here. I’m also on LinkedIn and Twitter if you’d like to connect! Now go out with your new knowledge and try make something great today in only 5 hours. Tag me on twitter if you succeed!