Anon Chat

02-04-2019

Anon Chat is a web chat application. Each user is given a temporary random UUID as a username. The random username is generated each time the application is loaded, therefore you'll get a new username everytime you reload/refresh the application page.

The purpose of the application is to allow users to communicate with anyone anonymously. I wanted to create this application, because I wanted to try to create a project using React.JS as the front end and GoLang as the back end. Lately, I've been interested in Go, and I wanted to try to make something using it. I found that the best way to learn new technologies is to build something with it, building anything with it is good.

Links:

• Application
• Source Code

Software Architecture

• React.JS for front end client.
• GoLang use as a server to serve the front end client and to do application logic.
• PostgreSQL database to store chat messages.
• Heroku Platform use for hosting the application.
• Cloudflare to set sub domain to the heroku application address.

Design

The application front end is done using React.JS, because I found it to be easy to write and maintain. I also chose it because in my previous project (RSE) I used Angular 5 to implement the front end, and I wanted to try using React.JS for this project. The UI design is a simple chat application design taken and improved on from online resources and tutorials.

The back end is implemented in Go, using the net/http package to create a server, and gorilla for the mux router and the websocket. The websocket is use for the chat messages. All client are connected to the websocket and each new message will be broadcast to all websocket, and so each client user will see the lastest message.

PostgreSQL is use for storing all chat messages. Each new client (when loaded) will make a request to the server to get all past chat messages from the database.

Development

I actually started the development from the back end side. Since, I'm more experience with using Go and back end development, it didn't take me too long to implement the needed features.

Once the back end is completed, I started working on the front end. I had to look up some tutorials for how to implement the websocket in React.JS to talk with my Go server. I also have to look for tutorials on making a chat app with React.JS, because I want to use the design as a template, and then I can make improvements to it.

Generally, there were no major problem in the development of the application, which is a surprise to be sure, but a welcome one.

Deployment

Here lies the problem. It was a lot harder to deploy my application than I initially suspected. In Heroku, the URL in my React.JS front end isn't set correctly to be able to communicate with the Go server. Initially, when developing the React.JS part, the URL is just localhost, but once in Heroku this won't work, because the client will look for the localhost in the client's device, and not the server hosted in Heroku.

This problem took me a while to fix, and I had to look at many resources and experiment with the code to make it work. As currently writing this post, the Heroku auto deploy application is at V16, as you can see it took me many tries to get it working.

Conclusion

In conclusion, I had a lot of fun working on the project. I feel that the back end server written in Go is very straight forward and easy to read and understand. I learnt that I also need to change the URL request from front end to back end to be dynamic to the hosted service. I think that this issue could also be resolve easier, if the front end and back end are hosted separately, for example: the front end could be serve from one Go server, and the back end API serve from another Go server. This way the URL for the front end can just be the URL to the back end API server.