목차
Welcome to the Chat Room!
웹 프론트엔드 JS 튜토리얼 Node.js를 사용하여 인스턴트 메시징 기능을 구현하는 웹 프로젝트

Node.js를 사용하여 인스턴트 메시징 기능을 구현하는 웹 프로젝트

Nov 08, 2023 am 11:38 AM
nodejs 인스턴트 메시징 웹 프로젝트

Node.js를 사용하여 인스턴트 메시징 기능을 구현하는 웹 프로젝트

인터넷의 급속한 발전으로 인스턴트 메시징 기능이 점점 더 보편화되고 있습니다. 소셜 네트워크, 전자상거래, 온라인 게임 등 무엇이든 사용자 경험과 효율성을 향상하려면 인스턴트 메시징 기능을 구현해야 합니다. 동시 요청에 적합한 효율적인 JavaScript 실행 환경인 Node.js는 인스턴트 메시징 기능을 사용하여 웹 애플리케이션을 빠르게 구축할 수 있는 훌륭한 지원을 제공합니다.

이 기사에서는 Node.js를 사용하여 웹 기반 인스턴트 메시징 기능을 구현하는 방법을 자세히 소개합니다. 이 프로젝트는 WebSocket 프로토콜을 기반으로 하며 기존 폴링이나 롱 폴링 기술을 사용하지 않습니다. WebSocket 기술의 장점은 서버와 클라이언트 간의 실시간 양방향 통신을 실현할 수 있고 도메인 간 요청도 잘 지원한다는 것입니다.

  1. Technology Selection

우리는 이 인스턴트 메시징 기능을 개발하기 위해 다음 기술을 사용할 것입니다:

  • Node.js: Node.js를 서버측 실행 환경으로 사용할 것입니다.
  • Express: Express 프레임워크를 사용하여 웹 애플리케이션을 개발하겠습니다.
  • Socket.IO: Socket.IO는 WebSocket 및 폴링을 기반으로 하는 크로스 플랫폼 실시간 통신 엔진으로 다양한 브라우저 및 모바일 장치와 호환됩니다.
  • MongoDB: MongoDB를 데이터 저장소로 사용합니다.
  • Bootstrap: Bootstrap 프레임워크를 사용하여 사용자 인터페이스를 구축하겠습니다.
  1. 프로젝트 프레임워크 구축

먼저 프로젝트 폴더를 생성하고 디렉터리를 입력한 후 다음 명령을 실행합니다.

npm init
npm install express socket.io mongodb --save
로그인 후 복사

위 명령은 새 Node.js 프로젝트를 생성한 다음 필요한 종속 라이브러리를 설치합니다. .

첫 번째 단계는 프로젝트 루트 디렉터리에 새 JavaScript 파일을 만드는 것입니다. 이 경우 파일 이름을 server.js로 지정했습니다. 그런 다음 아래 코드를 server.js 파일에 복사하세요.

const express = require('express');
const app = express();
const http = require('http').Server(app);

// TODO:编写代码来启动Socket.IO服务

app.use(express.static('public'));

http.listen(3000, () => {
  console.log('listening on *:3000');
});
로그인 후 복사

위 코드는 Express 프레임워크를 소개하고 HTTP 서버 객체를 생성하며 포트 3000을 수신합니다. 여기에는 나중에 논의될 Socket.IO의 초기화 및 시작이 포함됩니다. 동시에, express.static()은 프로그램의 정적 폴더에 대한 액세스를 설정하는 데 사용됩니다.

  1. MongoDB 구성

다음 명령을 실행하여 MongoDB를 설치하세요.

npm install mongodb --save
로그인 후 복사

프로젝트 루트 디렉터리에 mongo.js라는 새 JS 파일을 만들고 다음 코드를 추가하여 MongoDB를 설정하고 실행하세요.

const MongoClient = require('mongodb').MongoClient;

// Connection URL
const url = 'mongodb://localhost:27017';
// Database Name
const dbName = 'chatDB';
// Use connect method to connect to the server
MongoClient.connect(url, function (err, client) {
  console.log('Connected successfully to mongodb server');

  const db = client.db(dbName);
  client.close();
});
로그인 후 복사

이 파일에서는 MongoDB에서 공식적으로 제공하는 MongoClient 개체를 사용하여 MongoDB 서버에 연결합니다. MongoClient는 URL을 사용하여 mongod 인스턴스에 연결하고 dbName을 매개변수로 사용하여 작업을 수행합니다. mongo.js를 실행한 후 "MongoDB 서버에 성공적으로 연결되었습니다"와 유사한 메시지가 표시되면 MongoDB에 성공적으로 연결된 것입니다.

  1. Socket.IO 서비스 시작

Socket.IO 서비스를 시작하기 위해 지금 바로 server.js 파일에 다음 코드를 추가하겠습니다.

const express = require('express');
const app = express();
const http = require('http').Server(app);

const io = require('socket.io')(http);
io.on('connection', function (socket) {
  console.log('a user connected');
  socket.on('disconnect', function () {
    console.log('user disconnected');
  });
});

app.use(express.static('public'));

http.listen(3000, () => {
  console.log('listening on *:3000');
});
로그인 후 복사

위 코드는 Socket.io 모듈을 클릭한 다음 연결 이벤트가 설정됩니다. 클라이언트가 Socket.IO 서버에 연결되면 연결 이벤트가 트리거됩니다. Socket.IO 서버에 연결된 사용자 수를 서버 콘솔에서 알 수 있도록 연결 이벤트에 일부 로깅 출력을 추가했습니다.

  1. Create Client

이제 클라이언트 생성을 시작하겠습니다. 공용 폴더에서 index.html이라는 파일을 만들고 다음 코드를 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Node.js Chat App</title>
  </head>
  <body>
    <h1 id="Welcome-to-the-Chat-Room">Welcome to the Chat Room!</h1>
    <div id="messages"></div>
    <form id="chat-form" action="#">
      <input id="message" type="text" placeholder="Type message" />
      <button type="submit">Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/client.js"></script>
  </body>
</html>
로그인 후 복사

위 코드에서는 인스턴트 메시지를 보내고 받기 위한 간단한 사용자 인터페이스를 만들었습니다. 사용자 인터페이스는 주로 다음 세 부분으로 구성됩니다.

  • 채팅 메시지를 표시하는 데 사용되는
    요소입니다.
  • 사용자가 메시지를 보내는 데 사용할 수 있는 양식입니다.
  • 두 개의

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    Video Face Swap

    Video Face Swap

    완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

Eclipse 프로젝트 저장 위치 Eclipse 프로젝트 저장 위치 May 05, 2024 pm 07:36 PM

Eclipse 프로젝트가 저장되는 위치는 프로젝트 유형 및 작업공간 설정에 따라 다릅니다. Java 프로젝트: 워크스페이스 내의 프로젝트 폴더에 저장됩니다. 웹 프로젝트: 작업 공간의 프로젝트 폴더에 저장되며 여러 하위 폴더로 구분됩니다. 기타 프로젝트 유형: 파일은 워크스페이스 내의 프로젝트 폴더에 저장되며, 프로젝트 유형에 따라 구성이 달라질 수 있습니다. 작업공간 위치는 기본적으로 "<홈 디렉터리>/workspace"에 있으며 Eclipse 환경 설정을 통해 변경할 수 있습니다. 프로젝트 저장 위치를 ​​수정하려면 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 속성에서 리소스 탭을 선택하세요.

nodejs는 백엔드 프레임워크인가요? nodejs는 백엔드 프레임워크인가요? Apr 21, 2024 am 05:09 AM

Node.js는 고성능, 확장성, 크로스 플랫폼 지원, 풍부한 생태계, 개발 용이성 등의 기능을 제공하므로 백엔드 프레임워크로 사용할 수 있습니다.

nodejs를 mysql 데이터베이스에 연결하는 방법 nodejs를 mysql 데이터베이스에 연결하는 방법 Apr 21, 2024 am 06:13 AM

MySQL 데이터베이스에 연결하려면 다음 단계를 따라야 합니다. mysql2 드라이버를 설치합니다. mysql2.createConnection()을 사용하여 호스트 주소, 포트, 사용자 이름, 비밀번호 및 데이터베이스 이름이 포함된 연결 개체를 만듭니다. 쿼리를 수행하려면 Connection.query()를 사용하세요. 마지막으로 Connection.end()를 사용하여 연결을 종료합니다.

nodejs의 전역 변수는 무엇입니까 nodejs의 전역 변수는 무엇입니까 Apr 21, 2024 am 04:54 AM

Node.js에는 다음과 같은 전역 변수가 존재합니다. 전역 개체: 전역 핵심 모듈: 프로세스, 콘솔, 필수 런타임 환경 변수: __dirname, __filename, __line, __column 상수: undefine, null, NaN, Infinity, -Infinity

nodejs 설치 디렉토리에 있는 npm과 npm.cmd 파일의 차이점은 무엇입니까? nodejs 설치 디렉토리에 있는 npm과 npm.cmd 파일의 차이점은 무엇입니까? Apr 21, 2024 am 05:18 AM

Node.js 설치 디렉터리에는 npm과 npm.cmd라는 두 가지 npm 관련 파일이 있습니다. 차이점은 다음과 같습니다. 확장자가 다릅니다. npm은 실행 파일이고 npm.cmd는 명령 창 바로 가기입니다. Windows 사용자: npm.cmd는 명령 프롬프트에서 사용할 수 있으며, npm은 명령줄에서만 실행할 수 있습니다. 호환성: npm.cmd는 Windows 시스템에만 해당되며 npm은 크로스 플랫폼에서 사용할 수 있습니다. 사용 권장사항: Windows 사용자는 npm.cmd를 사용하고, 기타 운영 체제는 npm을 사용합니다.

nodejs와 java 사이에 큰 차이가 있나요? nodejs와 java 사이에 큰 차이가 있나요? Apr 21, 2024 am 06:12 AM

Node.js와 Java의 주요 차이점은 디자인과 기능입니다. 이벤트 중심 대 스레드 중심: Node.js는 이벤트 중심이고 Java는 스레드 중심입니다. 단일 스레드 대 다중 스레드: Node.js는 단일 스레드 이벤트 루프를 사용하고 Java는 다중 스레드 아키텍처를 사용합니다. 런타임 환경: Node.js는 V8 JavaScript 엔진에서 실행되는 반면 Java는 JVM에서 실행됩니다. 구문: Node.js는 JavaScript 구문을 사용하고 Java는 Java 구문을 사용합니다. 목적: Node.js는 I/O 집약적인 작업에 적합한 반면, Java는 대규모 엔터프라이즈 애플리케이션에 적합합니다.

nodejs는 백엔드 개발 언어인가요? nodejs는 백엔드 개발 언어인가요? Apr 21, 2024 am 05:09 AM

예, Node.js는 백엔드 개발 언어입니다. 서버 측 비즈니스 로직 처리, 데이터베이스 연결 관리, API 제공 등 백엔드 개발에 사용됩니다.

nodejs와 java 중 어느 것을 선택해야 합니까? nodejs와 java 중 어느 것을 선택해야 합니까? Apr 21, 2024 am 04:40 AM

Node.js와 Java는 각각 웹 개발에 장단점이 있으며 선택은 프로젝트 요구 사항에 따라 다릅니다. Node.js는 실시간 애플리케이션, 신속한 개발 및 마이크로서비스 아키텍처에 탁월한 반면, Java는 엔터프라이즈급 지원, 성능 및 보안에 탁월합니다.

See all articles