Expo Chat
My inspiration for project 2 transpired from previous Atlas Expo events I have attended. Every event has been absolutely fantastic with amazing undergraduate and graduate projects, but at times it is difficult to hit every room and every students work which can be a downfall of the event.
The Expo is meant for the purpose of exhibiting the students skills, learnings, as well as giving them an opportunity to present their hard work to the community ultimately helping them make networks and connect with other students and faculty. Thus, I wanted to create a beautiful representation of a real time chat for all attendees and participants to explore a process that could really connect everyone in the real time. So much of our time is spent on our phones connecting through comments, pictures, even emojis. So why not create a network between the attendees of the expo to give back to all our participants by giving real time feedback of projects, helping others find project you really enjoyed or simply giving a well deserved praise to those who’s work was exhibited.
The interface will involved a chat-chat via phone on a webpage while exploring a visual dynamic on a computer screen that will be displayed in one of the Expo rooms. I want the visual aspect to show how we really are all connected in some way by beautifully representing network connectivity anonymously.
Client – Sever – Client:
My first phase of implementation will be getting the real time chat connected through phones.
~ I have completed this aspect of the chat so that the message when submitted is received by the Server but then broadcasted back out to the other connected users. Essentially creating a chat based system.
Client – Server – Visual
My second phase of implementation will be sending the data to the computer where it will be stored/and represented in a graphical way while maintaining that chat aspect so those who pass by the monitor will see what others are saying and give them a first glance to what is happening at the Expo and the awesome projects there.
Process:
Expo Chat was my first simple chat application used at a specific event. My initial intent for the chat was to be used through out the event by attendees and participants to give real time feedback at the event. My first implication of the project was to create the mobile interface where you can make comments as well as view the posts. View the landing page and the user interface.
Below you will find the comment interface:
How the comment module works:
This is where the first client – server communication happens. When you hit the pink comment button the screen, where you will be taken to a popup page that give you the option to submit your comment. This section was created by using a form tag then sent using socket.io and node.js triggered by the submit button.
Below you will find the explore interface:
How the explore module works:
When the page has loaded, this is where the sever will emit back the JSON file to display all posts while still updating the new comments that are added during the feed. This part had some difficult reasoning behind it since I wanted the new updated messages to show at the top. I used a split() function to reverse the order of the JSON file and update the entire page every time a comment is sent and emitted back out.
Below you will find the monitor interface:
How the monitor interface works:
This is similar to that of the explore page but only displays the last comment that was submitted. If I had more time, I would have put a timer on the comments so they could be rotated through.
Overall, this project was a really awesome experience in respect to learning more about saving JSON files as well as client – server communications through socket.io and node.js.