WebSocket과 채팅 앱: 소켓 연결

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

채팅 응용 프로그램의 기능은 모든 소켓이 연결되어야 한다는 것입니다. 하나의 소켓은 서버에 있고 다른 소켓은 클라이언트 측 또는 브라우저에 있습니다. 해당 소켓은 응용 프로그램이 실행되기 시작할 때 서로 연결됩니다.

서버의 소켓이 클라이언트의 소켓과 연결되면 "connection"이라는 이벤트가 발생합니다. 이 이벤트에 대한 이벤트 핸들러가 생성된 경우 호출되고 클라이언트측 소켓 개체가 핸들러에 대한 인수로 전달됩니다.

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

io.on('connection', (socket) => {
    console.log('a user connected');
});

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>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        let socket = io();
    </script>
  </body>
</html>

Reference

이 문제에 관하여(WebSocket과 채팅 앱: 소켓 연결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sokhavuth/chat-app-with-websocket-socket-connection-2iii

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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

WebSocket과 채팅 앱: 소켓 연결

목차

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

Reference

좋은 웹페이지 즐겨찾기