Node.js를 사용하여 인스턴트 메시징 기능을 구현하는 웹 프로젝트-JS 튜토리얼-php.cn

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

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

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

Technology Selection

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

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

프로젝트 프레임워크 구축

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

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()은 프로그램의 정적 폴더에 대한 액세스를 설정하는 데 사용됩니다.

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에 성공적으로 연결된 것입니다.

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 서버에 연결된 사용자 수를 서버 콘솔에서 알 수 있도록 연결 이벤트에 일부 로깅 출력을 추가했습니다.

Create Client

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

<!DOCTYPE html>
<html>
  <head>
    <title>Node.js Chat App</title>
  </head>
  <body>
    <h1>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>

로그인 후 복사

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