WebSocket을 사용한 채팅 앱: 채팅 페이지 구축

17239 단어 javascriptnodereactwebdev

목차

Sokhavuth TIN ・ 8월 19일 ・ 1분 읽기



GitHub: https://github.com/Sokhavuth/chat
헤로쿠: https://khmerweb-chat.herokuapp.com/

채팅 애플리케이션의 경우 필요한 것은 채팅 페이지 하나뿐입니다. 홈페이지에 대한 경로를 이미 정의했으므로 이 경로를 채팅 페이지에 사용할 수 있습니다. 그러나 이 채팅 페이지를 구축하려면 글꼴, 이미지 및 CSS 파일과 같은 정적 자산을 사용해야 합니다. Express에서는 이러한 정적 자산을 저장하기 위해 "공용"폴더와 같은 폴더를 설정할 수 있습니다.


// 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>




/* 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);
}




/* 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;
    }
}
GMAIL에서 Discord 채널 Webhook 자습서로
【With image】 Problem that returns to the initial screen even after restarting after installing CentOS8 (VirtualBox)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage