집 >웹 프론트엔드 >JS 튜토리얼 >Node.js를 사용하여 인스턴트 메시징 기능을 구현하는 웹 프로젝트

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

PHPz원래의: 2023-11-08 11:38:05738검색

인터넷의 급속한 발전으로 인스턴트 메시징 기능이 점점 더 보편화되고 있습니다. 소셜 네트워크, 전자상거래, 온라인 게임 등 무엇이든 사용자 경험과 효율성을 향상하려면 인스턴트 메시징 기능을 구현해야 합니다. 동시 요청에 적합한 효율적인 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>

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

채팅 메시지를 표시하는 데 사용되는
요소입니다.
사용자가 메시지를 보내는 데 사용할 수 있는 양식입니다.
두 개의 <script> 요소. 하나는 소켓.io 클라이언트 라이브러리를 로드하는 데 사용되고 다른 하나는 클라이언트 스크립트를 로드하는 데 사용됩니다. </script>

클라이언트 측 스크립트 구현

공용 폴더에 client.js라는 새 JS 파일을 생성한 후 다음 코드를 추가합니다.

const socket = io();
const messageList = document.getElementById('messages');
const messageForm = document.getElementById('chat-form');
const messageInput = document.getElementById('message');

messageForm.addEventListener('submit', function (e) {
  e.preventDefault();
  socket.emit('chat message', messageInput.value);
  messageInput.value = '';
});

socket.on('chat message', function (msg) {
  const item = document.createElement('li');
  item.textContent = msg;
  messageList.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

위 코드는 핸들 통신을 사용하는 간단한 클라이언트 측 스크립트입니다. 사용자 인터페이스와 Socket.IO 사이. 클라이언트 코드의 주요 역할은 서버에 메시지를 보내고 수신된 메시지를 사용자 인터페이스에 표시하는 것입니다. Socket.IO의 Emit() 메서드를 사용하여 서버에 메시지를 보내고, on() 메서드를 사용하여 서버에서 보낸 메시지를 받습니다.

앱 테스트

이제 모든 파일이 준비되었으므로 웹 서버를 시작하고 브라우저에서 테스트할 수 있습니다. 터미널에서 프로젝트 루트 디렉터리로 이동하여 다음 명령을 입력합니다.

node server.js

브라우저에 http://localhost:3000/을 입력하여 애플리케이션을 엽니다. 사용자 인터페이스에 일부 채팅 메시지를 입력하면 해당 메시지가 채팅 메시지 목록에 추가되는 것을 볼 수 있습니다.

결론

Node.js와 Socket.IO는 인스턴트 메시징을 구현하는 웹 애플리케이션을 개발하는 데 매우 좋은 선택입니다. 이 기사에서는 Node.js를 런타임 환경으로, Express를 웹 프레임워크로, Socket.IO를 실시간 통신 엔진으로, MongoDB를 데이터 저장소로 사용하는 웹 기반 채팅 애플리케이션을 만드는 방법을 소개했습니다. 이는 매우 간단한 예이지만 이러한 기술을 사용하여 인스턴트 메시징 기능을 구현하는 방법을 보여줍니다.

위 내용은 Node.js를 사용하여 인스턴트 메시징 기능을 구현하는 웹 프로젝트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript bootstrap html express Static public Interface 并发 JS 对象事件 mongodb http websocket

성명：

이전 기사：Node.js를 사용하여 온라인 주문 기능을 구현하는 웹 프로젝트다음 기사：Node.js를 사용하여 온라인 주문 기능을 구현하는 웹 프로젝트