DEV Community

Cover image for Chat App with WebSocket: Building Chat Page
Sokhavuth TIN
Sokhavuth TIN

Posted on

Chat App with WebSocket: Building Chat Page


GitHub: https://github.com/Sokhavuth/chat
Heroku: https://khmerweb-chat.herokuapp.com/

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}`);
});
Enter fullscreen mode Exit fullscreen mode
<!--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>
Enter fullscreen mode Exit fullscreen mode
/* public/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);
}
Enter fullscreen mode Exit fullscreen mode
/* 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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)