인터넷의 급속한 발전으로 인스턴트 메시징 기능이 점점 더 보편화되고 있습니다. 소셜 네트워크, 전자상거래, 온라인 게임 등 무엇이든 사용자 경험과 효율성을 향상하려면 인스턴트 메시징 기능을 구현해야 합니다. 동시 요청에 적합한 효율적인 JavaScript 실행 환경인 Node.js는 인스턴트 메시징 기능을 사용하여 웹 애플리케이션을 빠르게 구축할 수 있는 훌륭한 지원을 제공합니다.
이 기사에서는 Node.js를 사용하여 웹 기반 인스턴트 메시징 기능을 구현하는 방법을 자세히 소개합니다. 이 프로젝트는 WebSocket 프로토콜을 기반으로 하며 기존 폴링이나 롱 폴링 기술을 사용하지 않습니다. WebSocket 기술의 장점은 서버와 클라이언트 간의 실시간 양방향 통신을 실현할 수 있고 도메인 간 요청도 잘 지원한다는 것입니다.
우리는 이 인스턴트 메시징 기능을 개발하기 위해 다음 기술을 사용할 것입니다:
먼저 프로젝트 폴더를 생성하고 디렉터리를 입력한 후 다음 명령을 실행합니다.
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를 설치하세요.
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 서비스를 시작하기 위해 지금 바로 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 서버에 연결된 사용자 수를 서버 콘솔에서 알 수 있도록 연결 이벤트에 일부 로깅 출력을 추가했습니다.
이제 클라이언트 생성을 시작하겠습니다. 공용 폴더에서 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>위 코드에서는 인스턴트 메시지를 보내고 받기 위한 간단한 사용자 인터페이스를 만들었습니다. 사용자 인터페이스는 주로 다음 세 부분으로 구성됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
