A real-time chat app was long overdue on my project list so finally I decided to see it through. I deployed the frontend on vercel and the backend on Digital Ocean. In this journey, I learned about sockets, docker, remote servers and lots of stuff which I'll mention in this blog. We will also look at challenges I faced while deploying the backend on digital ocean server and how I dealt with them😭 .
link to the GitHub repo: https://github.com/heyyakash/fullstackchatapp
link to chat app: https://fullstackchatapp.vercel.app
Technologies used
Frontend
NextJS
TailwindCSS
Backend
Go
Gorilla WebSocket package
The project does not use any database whatsoever hence all chats are lost once the connection is closed
What are WebSockets?
WebSocket is a communication protocol that two-way communication channel over a single TCP connection🤝 . Usually in a typical HTTP connection, the connection closes as soon as the response is sent to the client but in a ws connection the channel remains open for communication from either side (client or server).
How to establish a WebSocket connection?
In short, a WebSocket connection is an upgraded HTTP connection.
The client sends an HTTP request to the server with a special header called "Upgrade" and a value of "websocket".
The server responds with an HTTP 101 status code indicating that it agrees to switch protocols to WebSocket.
Once the connection has been upgraded, both the client and server can send messages in both directions without the overhead of the HTTP protocol.
The connection remains open until either the client or server closes it, or until a network error occurs.
Now, a socket.io variant for golang exists here but I decided to go forward with the gorilla websocket package. They have the documentation and everything required to build the project here. You can also look in the backend folder in the repo for reference.
I also implemented CORS to prevent unauthorized sites from making connection with the server.
Going forward the blog will focus on the deployment of the backend since deploying the frontend on Vercel is pretty straightforward.
Why Digital Ocean?
Simply put I received $200 credit through Github's Student's Developer pack, so it was kind of a no-brainer. I spun up a droplet costing $6/month and got a free domain from .TECH (again GitHub Student's developer pack).
How did I deploy the backend?
Dockerizing the application
I containerized the backend
I specified the build commands in the dockerfile and rest is again pretty straightforward.
Lastly, I pushed everything on github.
Remote Server
- I pulled the repo into the remote server, went into the backend folder and ran the following code
docker build -t chat-app-backend .
- After the docker image was created I spun it up using the following command
docker run -d -p 8080:8080 chat-app-backend
- The backend was up and running, Now everything must be running fine right?? No.🤡
I learnt that you can't setup connection between a secure client and an unsecure server. I needed the S as in the 'HTTPs'. I was not aware of this fact since i was used to deploying my backends on heroku which gave you the secured URL by default. Felt like and idiot as it was so obvious.
So I began searching for ways to obtain an SSL Certificate and came across Let's Encrypt.
Went through lot tutorials and blogs to setup the certficate but it always threw some kind of error.
I set up the A Records , AAAA Records, CNAME records and finally achieved the S and the project started running. Phew..
I learnt a lot throughout this journey and I wish to explore a lot more in future😋