How to Implement real-time chat functionality in ROR?

How to Implement real-time chat functionality in ROR?

16 Mar 2021
0 Comments
How to Implement real-time chat functionality in ROR?

Being a part of several projects, I have operated on multiple features like Chat functionality, Video calling, and Audio calling. All these features were built and implemented on the Rails framework (Ruby on Rails) and additional technologies. The project we were working on was a huge project with a prominent client which meant an enormous responsibility.

Technology Stack for the Project:

  • Frontend technologies: HTML, CSS, JavaScript, Jquery, Bootstrap, AJAX etc.
  • Backend technologies: Ruby - 2.6.3, Rails – 6.0.2 & Database – MYSQL

 

Implementation:

The client's requirement, in the application, included implementing the chat application for the users to easily communicate via messages, video calling, voice calling with other users.

  • For implementing the chat functionality, the concept of the Rail Action Cable was used. This required the installation of dependencies like WebSockets, npm. This enabled the sending of emojis in the chat.
  • For implementing video calling functionality, we used the third-party API (Vonage) in rails. To create the app on the Vonage dashboard, we used that keys and implemented them into the application.
  • For implementing audio calling functionality, the same API used for video calling was used. In the Vonage API, there are certain resources for implementing audio calling. By setting those attributes, the audio calling feature was implemented in rails. Fulfilling all the features for the real-time, there is a requirement to first install all the dependencies like WebSocket, npm, Redis server, etc. For running the application on the server, there is a need to set on the Nginx for action cable.

 

Challenges:

  • Real-time chat: This was the most challenging and essential part of the project in which, when one user sends the message to another user, the other user needs to refresh the page. Only after refreshing the page, the user will receive the message sent by the first user. This doesn’t make any sense as the user will never get a notification that the other user has sent a message.
  • Creating Channel for video/audio call: When the user clicks on the video/audio calling, the other user will get the popup of the incoming video/audio call indicating 'username XYZ' is calling. After receiving or accepting the call, the AppearanceChannelRoom for communicating through the video/audio needs to be created.

 

Coding:

(function() {

  this.App || (this.App = {});

  App.cable = ActionCable.createConsumer();

}).call(this);

 

​​​​​​​

 

 




Leave a comment: