nodejs는 단일 채팅 기능을 구현합니다.-프런트엔드 Q&A-php.cn

nodejs는 단일 채팅 기능을 구현합니다.

WBOY

풀어 주다： 2023-05-28 11:01:09

원래의

637명이 탐색했습니다.

Node.js는 단일 채팅 기능을 구현합니다

Node.js는 Chrome의 V8 엔진을 기반으로 하는 JavaScript 실행 환경으로, 서버 측에서 JavaScript를 실행할 수 있습니다. Node.js를 사용하면 고성능의 확장 가능한 웹 애플리케이션을 쉽게 구축할 수 있습니다.

이 기사에서는 Node.js를 사용하여 두 사용자 간의 실시간 채팅인 간단한 단일 채팅 기능을 구현해 보겠습니다.

필요한 도구 및 기술:

Node.js
Express Framework
Socket.IO

프로젝트 만들기

먼저 새로운 Node.js 프로젝트를 만들어야 합니다. npm init 명령을 사용하여 프로젝트를 초기화하거나 다른 방법을 사용하여 프로젝트 폴더를 만들 수 있습니다.

종속성 설치

다음으로 Express 및 Socket.IO 라이브러리를 설치해야 합니다. 프로젝트 폴더에서 명령줄을 열고 다음 명령을 입력합니다:

npm install express socket.io --save

로그인 후 복사

이렇게 하면 Express 및 Socket.IO 라이브러리가 설치되고 package.json 파일에 추가됩니다.

Create Server

프로젝트 폴더에 server.js라는 파일을 생성하세요. 이것이 메인 서버 파일입니다. 다음 코드를 추가하세요:

const express = require('express');
const app = express();

const server = app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

로그인 후 복사

이렇게 하면 Express 애플리케이션이 생성되어 포트 3000에 바인딩됩니다. 이제 브라우저를 열고 http://localhost:3000을 방문하여 서버가 제대로 실행되고 있는지 테스트할 수 있습니다. 모든 것이 정상이면 "Cannot GET /" 메시지가 표시됩니다. 이는 아직 애플리케이션에 경로를 추가하지 않았기 때문입니다.

채팅방 만들기

이제 서로 다른 두 사용자 간의 실시간 채팅 기능을 구현하기 위해 채팅방을 만들어야 합니다. 이를 위해 Socket.IO 라이브러리를 사용하여 실시간 이벤트와 통신을 처리할 수 있습니다.

먼저 server.js 파일에 다음 코드를 추가해야 합니다.

const io = require('socket.io')(server);

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

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

로그인 후 복사

이렇게 하면 Socket.IO 인스턴스가 생성되어 기존 HTTP 서버에 바인딩됩니다. 새로운 연결이 있으면 콜백 함수는 '사용자가 연결되었습니다'라는 메시지를 출력합니다. 연결이 끊어지면 콜백 함수는 '사용자 연결이 끊어졌습니다'라는 메시지를 출력합니다.

이제 채팅방에 메시지를 보내고 받는 기능을 추가할 수 있습니다. 이를 위해 Socket.IO의 Emit() 메소드와 on() 메소드를 사용할 수 있습니다.

server.js 파일에 다음 코드를 추가하세요.

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

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

로그인 후 복사

이렇게 하면 사용자가 메시지를 보내고 연결된 모든 클라이언트에 메시지를 브로드캐스트할 수 있습니다.

클라이언트 생성

이제 간단한 HTML 및 JavaScript 페이지를 사용하여 Socket.IO 서버에 연결하고 메시지 보내기 및 받기 기능을 구현해야 합니다. 프로젝트 폴더에서 index.html이라는 새 파일을 만들고 다음 코드를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Node.js Chat</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="message-form">
    <input type="text" id="input-message" autocomplete="off" />
    <button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(function () {
      const socket = io();
      $('#message-form').submit(function(e) {
        e.preventDefault(); // prevents page reloading
        const message = $('#input-message').val();
        socket.emit('chat message', message);
        $('#input-message').val('');
        return false;
      });
      socket.on('chat message', function(msg) {
        $('#messages').append($('<li>').text(msg));
      });
    });
  </script>
</body>
</html>

로그인 후 복사

이 HTML 파일에서는 jQuery 라이브러리를 사용하여 DOM 조작을 단순화했습니다. 여기에는 입력 상자와 "보내기" 버튼은 물론 모든 메시지를 표시하는

JavaScript 부분에서는 Socket.IO의 클라이언트 측 라이브러리를 사용하여 서버에 연결하고 사용자가 양식을 제출한 후 서버에 메시지를 보내는 Socket.IO 인스턴스를 만들었습니다. 클라이언트는 서버로부터 새 메시지를 받으면 페이지에 새 목록 항목을 추가합니다.

애플리케이션 실행

이제 명령줄에 다음 명령을 입력하여 애플리케이션을 시작할 수 있습니다.

node server.js

로그인 후 복사

다음으로, 웹 브라우저를 열고 http://localhost:3000을 방문하세요. 간단한 채팅 인터페이스가 표시됩니다. 다른 브라우저 창을 열거나 동일한 컴퓨터에서 다른 브라우저 탭을 열어 채팅을 시작하세요.

요약

이 기사에서는 Node.js와 Socket.IO 라이브러리를 사용하여 실시간 단일 채팅 애플리케이션을 구축했습니다. 이 애플리케이션을 사용하면 사용자는 메시지를 보내고 받을 수 있으며 Socket.IO 라이브러리를 사용하여 모든 실시간 통신을 처리할 수 있습니다. 이 애플리케이션은 비교적 간단하지만 Node.js 및 Socket.IO를 사용하여 실시간 웹 애플리케이션을 구축하는 방법에 대한 기본 원칙을 보여줍니다.

위 내용은 nodejs는 단일 채팅 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!