WebSocket을 사용한 채팅 앱: 새 사용자 추가

24722 단어 javascriptnodereactwebdev

목차

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



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

새로운 사용자가 채팅 페이지에서 자신의 이름을 채울 때 관련 소켓 클라이언트는 이 새로운 사용자에 대한 정보를 소켓 서버로 내보낼 수 있으며, 그러면 모든 소켓 클라이언트에 채팅 메시지를 브로드캐스트하여 새로운 사용자가 가입했음을 알립니다. 대화.

또한 소켓 서버는 채팅 페이지의 컬렉션 개체에 있는 모든 사용자를 나열할 모든 소켓 클라이언트로 보낼 컬렉션 개체에 이 새 사용자를 등록할 수도 있습니다. 소켓 클라이언트는 사용자가 채팅 이름을 변경하려고 할 때 소켓 서버에 이벤트를 내보낼 수도 있습니다.


<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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="msg-board"></div>
                <form action="" onSubmit="submitHandler(event)">
                    <input type="text" id="chat-name" onChange="onChange()"
                    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 id="users" class="content"></div>
        </div>
    </section>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        socket.on('connection', (userid) => {
            if(!localStorage.getItem('userid')){
                localStorage.setItem('userid', userid);
            }
        })

        function onChange(){
            const username = document.getElementById('chat-name');
            if(username.value){
                const obj = {
                    username: username.value,
                    userid: localStorage.getItem('userid'),
                }

                socket.emit('new user', obj);
            }
        }

        socket.on('new user', (obj) => {
            const msgBoard = document.getElementById('msg-board');
            let element = document.createElement('div');
            element.setAttribute("class", "new-user");
            const msg = `${obj.username} join the conversation`;
            element.textContent = msg;
            msgBoard.appendChild(element);
            element.scrollIntoView();

            const users = document.getElementById('users');
            users.innerHTML = '';
            for(let key in obj.users){
                element = document.createElement('div');
                element.setAttribute("class", "user");
                const user = obj.users[key];
                element.textContent = user;
                users.appendChild(element);
                element.scrollIntoView();
            }
        })

        function submitHandler(e){
            e.preventDefault();
            const input = document.getElementById('input');
            const obj = {
                userid: localStorage.getItem("userid"), 
                message: input.value,
            };

            if (input.value) {
                socket.emit('chat message', obj);
                input.value = '';
            }
        }

        socket.on('chat message', function(obj){
            const msgBoard = document.getElementById('msg-board');
            const element = document.createElement('div');
            const msg = `${obj.chatName}: ${obj.message}`;
            element.textContent = msg;
            msgBoard.appendChild(element);
            element.scrollIntoView();
        });
    </script>
  </body>
</html>




// 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 { Server } = require("socket.io");
const io = new Server(server);


const port = process.env.PORT || 3000;
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.sendFile(`${__dirname}/index.html`);
});

const users = {};
io.on('connection', (socket) => {
    const userid = Date.now() + Math.round(Math.random() * 1E9).toString();
    socket.emit('connection', userid);

    socket.on('new user', (obj) => {
        users[obj.userid] = obj.username;
        obj.users = users;
        io.emit('new user', obj);
    });

    socket.on('chat message', (obj) => {
        obj.chatName = users[obj.userid];
        io.emit('chat message', obj);
    });
});

server.listen(port, () => {
    console.log(`listening on *${port}`);
});
【축 2020년】VirtualBox의 VM로 호스트 온리 어댑터가 미선택이 된다
용감한 바로 가기 및 우분투 응용 프로그램

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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