{"id":21651,"date":"2021-09-18T05:15:00","date_gmt":"2021-09-18T03:15:00","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=21651"},"modified":"2023-06-18T17:56:14","modified_gmt":"2023-06-18T15:56:14","slug":"deploy-random-chat-application-on-aws-ec2-with-kubernetes","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/09\/18\/deploy-random-chat-application-on-aws-ec2-with-kubernetes\/","title":{"rendered":"Deploying Random Chat Application on AWS EC2 with Kubernetes"},"content":{"rendered":"\n

1. Introduction<\/strong><\/p>\n\n\n\n

For the examination of the lecture \u201cSoftware Development for Cloud Computing\u201d, I want to build a simple Random Chat Application. The idea of this application is based on the famous chat application called Omegle. Omegle is where people can meet random people in the world and can have a one-on-one chat. With Omegle people can have a conversation with not only normal chat but also a video chat. Not like Omegle, my application has only a normal texting function.<\/p>\n\n\n\n

2. Technologies for the development of application<\/strong><\/p>\n\n\n\n

a. Frontend<\/p>\n\n\n\n

React<\/p>\n\n\n\n

For Frontend Development there are a great number of open-source libraries. React is recently one of the most popular and widely used libraries. There are many reasons for a developer to choose and use React. It is one of the most popular front-end technologies in the market. Compared to other libraries out there React seems to be easier to learn. As it doesn\u2019t take much time to learn this technology, the developers can rapidly practice and build their own very first project. React helps increase productivity by using reusable components and development tools. There are many development tools available for React that speech up the project. The most important reason is that it has very strong community support. There are thousands of free React tutorial videos and blog posts on the internet which is very helpful for the developer. Therefore, I decided to learn this library during previous semesters. This project gives me a chance to have real practice.<\/p>\n\n\n\n

b. Backend<\/p>\n\n\n\n

Node.js<\/p>\n\n\n\n

Node.js has become one of the most popular JavaScript tools. Node.js is a JavaScript runtime environment, which allows companies to improve their efficiency of the web development process. The frontend and Backend teams can now work more easily together. Since Node.js is written in JavaScript and bases on Google V8 Engine, everything is done very quickly. Node.js can create an Event Loop, which can cover all asynchronous input-output operations.  And the best part is that it can increase the speed of any other framework as well. By allowing developers to write JavaScript code for both the Frontend and the Backend, Node.js makes it easy to send data between the server and the client, which makes it easier to synchronize data immediately.<\/p>\n\n\n\n

Socket.io<\/p>\n\n\n\n

When I decided to develop a chat application, I already thought about Socket.io. I had a chance to know this JavaScript library during the course Web Development 2. To build a real-time application we should use Socket.io. Socket.io will help parties in different locations connect with each other, transmitting data instantly through an intermediary server. Socket.io can be used in many applications such as chat, online games, updating the results of an ongoing match, … It is used a lot by the developer community, because of its speed and convenience. Socket.io provides us with many methods as well as outstanding features such as security, auto-connect, disconnection detection, multiplexing, room creation, \u2026<\/p>\n\n\n\n

3. Application explanation<\/strong><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

a. Client<\/p>\n\n\n\n

As I mentioned, for the client-side I use React. Therefore, I have a chance to know the concept of a Single Page Application, whose content is loaded only once and updated dynamically. For the interaction with the page or with subsequent pages, we don\u2019t need another server, which means that the page is not reloaded. To apply this concept of the web application, React offer a packet names \u201creact-router-dom\u201d. My application is very simple, so it only has two paths to be loaded. The root path is where the user inputs his name, and it will load the Join component. The other path is the Chat component, in which the user sends messages after getting a room.<\/p>\n\n\n\n

Socket.io library for the client is imported because it is not provided by JavaScript. This will expose the \u2018io\u2019 namespace.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Endpoint URL will be given for \u2018io\u2019 to connect with the socket.io server.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Now users can send and receive messages from the server after the room is created.<\/p>\n\n\n\n

b. Server<\/p>\n\n\n\n

To setup server, some packets need to be imported:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

The server is set up and listen on port 5000<\/p>\n\n\n\n

The server can also save users temporally, so it will know which user\u2019s name already existed. And then it can remove users after they terminate their chat. To execute all those actions, I write a users.js file, which will have some functions such as, addUser, removeUser, getUser, …<\/p>\n\n\n\n

I want to create a chat application where users don\u2019t have to have an already known friend and a Chat room will be automatically created for them. With this application, they can meet a new friend and the server will get them a chat room.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

I created a variable queue, which is an array. It will save a user, who has not had any partner yet, temporarily. Every user, who already inputted their names, will be connected to the socket. Socket knows that he wants to join a room. In the callback function of the socket, the name and socket ID of the user will be saved by function \u2018addUser\u2019, which is in users.js. Then socket will check if any other user is waiting for a partner in a queue. If someone is waiting for a partner, he will be popped from the queue. His socket and partner\u2019s socket will be connected. And their room ID will be a combination of the 2 socket IDs. If no one is waiting for a room, the current socket is pushed to a queue and wait for another user to join.<\/p>\n\n\n\n

c. Problem<\/p>\n\n\n\n

CORS: <\/p>\n\n\n\n

It is an abbreviation for Cross-Origin Request Sharing, which means that all data should come from the same resource. They use it as a security measure because JavaScript can load content from other servers without the knowledge of the user. This problem can be solved when both websites are aware of the data exchange, then the process will be allowed.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

I installed the CORS package on my server. Origin will configure the\u00a0Access-Control-Allow-Origin\u00a0CORS header. Now client and server can communicate without error.<\/p>\n\n\n\n

4. Testing<\/strong><\/p>\n\n\n\n

Testing is very important during the development of the application. Testing helps developers to discover existing errors\/bugs before releasing the application. Therefore, the quality of the application would be enhanced. I decided to test only the server-side because it is more complicated than the client-side. Two tests are being created.<\/p>\n\n\n\n