Summary

BlocChat is a simple chat application that allows users to create chat rooms and post messages after they have chosen a username. Using AngularJS to make HTTP requests and Rails for the backend to serve data to Angular, BlocChat is able to provide real time sending and recieving of messages.

Explanation

BlocChat was built following user stories specified by Bloc, and built with input from my Bloc mentor, John O’Connor. While the user stories were provided by Bloc, I had to implement the features on my own.

Problems and Solutions

Serving Data from Rails to AngularJS

Making HTTP requests with AngularJS is quite simple because Angular comes with an $http service that can be used to make HTTP requests. The problem that I faced here was setting up a Rails app to play with Angular in a friendly manner.
Rather than setting up the backend like a standard Rails app, I had to essentially create an API that would be able to accept HTTP requests and respond with JSON representations of the requested data. Now Rails apps generally use CSRF protection so the server will expect a Rails generated CSRF token to accompany any incoming requests. The solution to this was to include a gem called angular_rails_csrf that adds an X-XSRF-TOKEN header to all requests generated by the Angular $http service.

On the Angular side, I simply created a ChatRooms service, which was responsible for making POST and GET requests for ChatRooms and Messages from the server. Upon receiving a response, the service would assign that response to the appropriate attribute so that it would be accessible across all of the Angular controllers that had access to the service.

Allow User to Choose Username

Without saving user data to the database, I wanted to require users to select a username the first time they accessed the site (per browser session). The solution I came to was to make use of the ngCookies Module. Then I created a .run() function for my main module that would check to see if a user had already registered a username. First, I checked for a cookie called “currentBlocChatUser”, and then required the user to register, if the cookie was not present:

if (!$cookies.get("currentBlocChatUser") || $cookies.get("currentBlocChatUser") === '') {
      $uibModal.open({
        ...
      }).result.then(function success (username) {
        $cookies.put("currentBlocChatUser", username);
      }, function rejected (rejection) {
        console.log(rejection);
      });
    }

Features

• User must register a username on their first visit to site (per browser session)
• User can create chat rooms
• User can read and post messages to a chat room

Conclusion

While simple, BlocChat gave me experience combining Rails and AngularJS, as well as working with some other Angular Modules, ngCookies,UI Bootstrap, and templates. This was also another great opportunity to get more comfortable working with the AngularJs framework.