▪ Definition of Websockets:
A WebSocket is a communication protocol that provides full-duplex communication
channels over a single TCP connection. It enables real-time, event-driven connection
between a client and a server.
▪ Importance of Real-Time Communication in Web Applications:
Information needs to be shared rapidly, decisions need to be made quickly, products are
being developed fastly, and customer queries are being resolved instantly .

TRADITIONAL HTTP VS. WEBSOCKETS

Protocol Type:
HTTP: Stateless, request-response.
Websockets: Full-duplex, persistent.
▪ Connection Setup :
HTTP: Establishes a new connection per request.
Websockets: Maintains a persistent connection.
▪ Communication Model :
HTTP: One-way communication.
Websockets: Bidirectional communication.
▪ Latency :
HTTP: Higher due to connection setup overhead.
Websockets: Lower due to persistent connections.

HOW WEBSOCKETS WORK?

1. Handshake :
▪ The process begins with an initial handshake between the client and server, initiated through a standard HTTP request.
▪ The client sends an HTTP request to the server, indicating its intention to upgrade the connection to a WebSocket connection.
▪ The server responds with a specific HTTP status code (101 Switching Protocols) and indicates the upgrade to the WebSocket protocol .

2. Persistent Connection :
▪ Once the handshake is complete, the connection transitions from HTTP to the WebSocket protocol.
▪ Unlike traditional HTTP, which establishes a new connection for each request-response cycle, Websockets maintain a persistent connection between the client and server.
▪ This persistent connection allows for continuous, bidirectional communication between the client and server.
3. Bi-Directional Communication :
▪ With the WebSocket connection established, both the client and server can send messages to each other at any time.
▪ Messages can be sent in either direction, enabling real-time updates and interactive communication.
▪ This bidirectional communication facilitates a wide range of real-time applications, such as chat applications, live notifications, and collaborative editing tools.

4. Data Exchange:
▪ Once the WebSocket connection is established, both the client and server can freely exchange data in real-time.
▪ Messages can be sent from either the client or the server without waiting for a request.
5. Broadcasting:
▪ The server can broadcast messages to multiple clients simultaneously.
▪ This is commonly used in chat applications, multiplayer games, or live data feeds.
6. Subscription Models:
▪ WebSocket connections can implement subscription models where clients subscribe to specific topics or channels.
▪ The server then sends relevant updates to subscribed clients, allowing for targeted message delivery.

IMPLEMENTING WEBSOCKETS IN A RAILS
APPLICATION

1. Choose Library: Select a WebSocket library like ‘websocket-rails’ or use Rails' built-in Action Cable.​

2. Set Up Action Cable: Configure ‘config/cable.yml’, create channels for WebSocket connections, and handle message broadcasting.

3. Define Endpoints: Specify WebSocket endpoints in ‘config/routes.rb’ for connection handling.

4. Authenticate Connections: Implement authentication to ensure secure communication.

5. Handle Messages: Process incoming messages in controllers or channels, update databases, and broadcast updates.

6. Testing and Debugging: Write tests, use logging, and debugging tools for troubleshooting.

7. Scalability and Performance: Consider scalability and use techniques like connection pooling and load balancing.

8. Integrate with Frontend: Use JavaScript frameworks to establish and manage WebSocket connections from the client side.

9. Monitoring and Maintenance: Set up monitoring, address security vulnerabilities, and optimize performance regularly.

USE CASES OF WEBSOCKET:

▪ Real-Time Chat Application:
Example: A messaging platform where users can send and receive messages instantly without needing to refresh the page.
▪ Live Updates and Notifications:
Example: A social media platform that notifies users in real-time about new likes, comments, or messages.
▪ Multiplayer Online Games:
Example: Online gaming platforms like Fortnite or BGMI, where players can interact with each other and the game environment in real-time.
▪ Financial Trading Systems:
Example: Stock trading platforms that provide real-time updates on stock prices, allowing traders to make informed decisions quickly.

Example: Implementing WebSocket in a Rails Chat Application

Now, let's look at a practical example of implementing WebSocket in a Rails application using `websocket-rails`. This example demonstrates how to create a basic chat interface where users can send and receive messages in real-time without needing to refresh the page. 

1. **Gemfile**: Add the `websocket-rails` gem and run `bundle install`.

2.Configure WebSocket-Rails: Set up WebSocket-Rails in config/initializers/websocket_rails.rb.

 

# config/initializers/websocket_rails.rb
WebSocketRails.setup do |config|
  config.standalone = true
  config.synchronize = true
end

 

3.Create a Chat Controller: Define a controller to handle WebSocket events.

# app/controllers/chat_controller.rb
class ChatController < ApplicationController
  include WebsocketRails::Controller
  def initialize_session
    # Initialize any session variables here
  end
  def new_message
    message = params[:message]
    broadcast_message :new_message, message
  end
end

 

4.Define Routes: Add a route for sending chat messages.

 

# config/routes.rb
Rails.application.routes.draw do
  root 'chat#index'
  post '/chat/new_message', to: 'chat#new_message'
end

 

5.Create a View: Develop a simple chat interface using Rails form helpers and JavaScript.

 

<!-- app/views/chat/index.html.erb -->
<!DOCTYPE html>
<html>
<head>
  <title>Chat</title>
  <%= javascript_include_tag 'application' %>
</head>
<body>
  <div id="messages"></div>
  <%= form_with(url: '/chat/new_message', remote: true) do |form| %>
    <%= form.text_field :message, id: 'chat-input' %>
    <%= form.submit 'Send', id: 'send-button' %>
  <% end %>
  <script>
    // Establish WebSocket connection
    const uri = 'ws://' + window.location.host + '/websocket';
    const dispatcher = new WebSocketRails(uri);
    dispatcher.on('new_message', function(message) {
      const messages = document.getElementById('messages');
      messages.insertAdjacentHTML('beforeend', '<p>' + message + '</p>');
    });
    document.getElementById('send-button').addEventListener('click', function() {
      const input = document.getElementById('chat-input');
      const message = input.value;
      dispatcher.trigger('new_message', message);
      input.value = '';
    });
  </script>
</body>
</html>

 

That's all about Websocket in Rails!

THANK YOU!