Build A Messaging App Using Socket.io and Node.js

The Set Up

npm init -y
npm install socket.io 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('socket.io')(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 => {
console.log(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
server.js

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