For chat application, what we need is just one chat page that is it. As we already defined the route for the homepage, we can use this route for chat page. However, to build this chat page, we need to use static assets such as fonts, images, and CSS files. In Express, we can set a folder for example “public” folder to store these static assets.
// index.js
// npm install express
// npm install socket.io
// npm install nodemon
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const path = require('path');
const port = process.env.PORT || 3000;
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
server.listen(port, () => {
console.log(`listening on *${port}`);
});
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<title>Khmer Web Chat</title>
<link rel="stylesheet" href="/base.css" />
<link rel="stylesheet" href="/chat.css" />
<link href="/fonts/setup.css" rel="stylesheet" />
<link href="/logo.png" rel="icon" />
</head>
<body>
<section class="Chat region">
<div class="main">
<div class="title">
<input type="button" value="Leave chat" />
</div>
<div class="outer">
<div id="messages">Chat messages</div>
<form id="form" action="" onSubmit="">
<input type="text" required placeholder="Chat name" />
<input id="input" autocomplete="off" required
placeholder="Type your message here" />
<input type="submit" value="Send" />
</form>
</div>
</div>
<div class="sidebar">
<div class="title">All people</div>
<div class="content">Users</div>
</div>
</section>
</body>
</html>
/* style.css */
/* public/styles/base.css */
:root{
--background: #d7532c;
--background-dark: #2b2b2b;
--background-light: #f9dd89;
--body-font: 14px/1.5 Vidaloka, OdorMeanChey;
--link: lightgrey;
--color: black;
--item-listing: white;
--item-listing-color: grey;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: var(--link);
}
a:hover{
opacity: .7;
}
.region{
max-width: 1150px;
margin: 0 auto;
}
body{
color: var(--color);
font: var(--body-font);
background: var(--background-light);
}
/* chat.css */
.Chat{
margin-top: 50px;
display: grid;
grid-template-columns: 70% auto;
grid-gap: 15px;
}
.Chat input{
font: var(--body-font);
padding: 5px;
}
.Chat .main .outer{
background-color: lavender;
padding: 20px;
}
.Chat .main .title{
background: black;
text-align: right;
}
.Chat .main #messages{
height: 400px;
background-color: white;
border: 1px solid grey;
padding: 20px;
}
.Chat .main .outer form{
display: grid;
grid-template-columns: 20% auto 15%;
}
.Chat .sidebar .title{
text-align: center;
background-color: black;
color: white;
padding: 5px;
}
.Chat .main .outer form #input{
font: 14px/1.5 Courgette, HandWriting;
}
.Chat .sidebar{
background-color: white;
}
.Chat .sidebar .content{
padding: 20px;
}
@media only screen and (max-width: 600px){
.Chat{
grid-template-columns: 100%;
padding: 10px;
}
.Chat .main .outer{
padding: 0;
}
}
