WebSocket Protocol with ActionCable — a high-level understanding
The WebSocket protocol is made available to rails via ActionCable. Let’s first take a look at what happens in a standard HTTP request-response cycle in the browser. A client (which is a browser let’s say — the user goes to a website and requests to see a page) sends a request which is received by the server. Then the server issues some kind of response. This is a one-way communication just like the client -> server.
Looking at this, we end up with one-way communication at any given time between the client and the server. Yes, data is going in both directions but at any given point in time, it is flowing in one direction. This is what happens in a standard HTTP protocol.
Now let’s take a look at what happens with WebSocket. At first, the client makes a request to initiate a connection with the server. This obviously goes from the client to the server so it’s one way — but once the connection is established, now it is no longer a one-way communication direction. information can flow both ways at any given time. So a user can be filling out a form for example and receiving information from the chatroom at the same time from the server, while your request is getting routed to the server. And this is not just happening with one client and a server, this is happening with multiple clients and servers. So what you end up with is full duplex communication between lots of clients and the server. This is what allows the chatroom functionality to take place. One client may enter a message and then that will be saved let’s say in your server, at the same time other clients could be communicating with the server with their connection, and that message that the initial client sent to the server can be broadcast to all of the clients at once. This way you end up with something called real-time communication. This is because, in a chatroom you don’t have to refresh the browser anymore to get new information, it basically gets broadcast from the server anytime a new message is hit in the server. As long as you’re connected — meaning that you have the chat window open — you could be getting real-time updates as other people are updating information on the server.
Rails enables this implementation using ActionCable, which is simply a way to make it easier for the developer to implement in a rails application.
Understanding the concept of ActionCable setup in your rails application
Let’s take a look at the basic concepts here so that it can be implemented in any application. We saw that with WebSocket, we’re initiating a connection request from the client and then the connection gets established to make two-way communication. Let’s take a look at what handles this on the server side. On the server side, this specific feature is handled by something called a ‘channel’. For example, we can create a ‘chatroom_channel’. This chatroom channel will enable the two-way communication that we’ve been speaking about between the client and the server. Once the connection is established, we can use this channel to broadcast messages to all users that are ‘subscribed’ to the channel (meaning that they have the chat window open). All of the users will get real-time message updates as soon as the messages are created.
The first step would be to create the chatroom channel. This handles the server side of things.
For the client side — meaning the users that have their browser open — we will use JavaScript (if you don’t have much JS experience, nothing to worry about, the code used is very simple and can be easily explained. But to summarize, Javascript will handle the browser side.
Let’s work with messages. You probably have a create method in your rails application that hits the database every time a new message is created. We will update what happens once the message hits the database. We will use something called a broadcast method that’s provided by ActionCable that will broadcast that message and the specifics of it. This message will be received by a coffeescript file (which is essentially a JavaScript file) which can then modify the data that’s received — which was broadcast from the messages controller and display that data in your chatroom view page.
To summarize — WebSocket with ActionCable:: a general flow
- Generate a chatroom channel
- Update messages_controller create action — to broadcast data to the chatroom channel
- Write some JavaScript to handle the data — and append to the chat window
And that’s all, this is the basic structure and flow of how a web-socket protocol works.
