Build A Messaging App Using and Node.js

The Set Up

npm init -y
npm install nodemon

Build the View

Writing out an HTML DOC is fine too
Our basic HTML
The text in the browser tab is changed in the ‘title’ tag of line 6 in our html

Creating the Server File

const io = require('')(3000)
// creates a server by passing the port number
io.on('connection', socket => {
socket.emit('message', 'Hi There!')
//this function is called every time someone loads the site
//each user has their own socket
const socket = io('http://localhost:3000)socket.on('message', data => {
//here 'message' represents the message event name we defined
//in our socket.emit() function
The message we defined in server.js was sent to the browser

Grabbing Message Data

const form = document.querySelector('.msg-form')
const formContainer = document.querySelector('.msg-container')
const messageInput = document.querySelector('.msg-input')

Display the Message on the Browser

main.js file

Adding Users

The end result of our basic application

On Styling

Going Forward



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aidan McBride

Aidan McBride

I ‘m a Web Developer and a Flatiron coding bootcamp alumni. I currently work in the financial tech industry as a Front End Engineer