찾다

집 >웹 프론트엔드 >프런트엔드 Q&A >nodejs로 대화방 만들기

nodejs로 대화방 만들기

WBOY
WBOY원래의
2023-05-24 12:23:381014검색

인터넷의 급속한 발전과 함께 사람들이 서로 소통하는 방식도 끊임없이 변화하고 있습니다. 채팅룸은 지리적 또는 시간대 제한에 관계없이 사용자가 실시간으로 통신하고 정보를 교환할 수 있는 온라인 인스턴트 메시징 애플리케이션입니다. 채팅방을 구현하는 방법에는 여러 가지가 있습니다. 이번 글에서는 nodejs로 채팅방을 구축하는 방법을 소개하겠습니다.

1. 채팅방의 기본 구현 원리

채팅방은 네트워크 기반 인스턴트 메시징 시스템이며 구현 원리는 매우 간단합니다. 사용자가 채팅방에 입장하면 먼저 채팅 서버에 접속해야 하며, 서버는 해당 사용자의 연결 정보를 채팅방의 사용자 목록에 추가합니다. 사용자가 채팅방에 메시지를 보내면 서버는 해당 메시지를 채팅방의 모든 사용자에게 브로드캐스팅합니다. 또한 서버는 사용자의 연결 상태와 연결 해제된 사용자 정보도 실시간으로 모니터링해야 합니다.

2. 준비

채팅방 구축을 시작하기 전에 nodejs와 npm이 설치되어 있는지 확인하세요. 그렇지 않은 경우 nodejs 공식 웹사이트에 가서 다운로드하여 설치할 수 있습니다.

3. 채팅방 서버측 구축

  1. 프로젝트 생성

먼저 로컬 환경에서 채팅방 프로젝트를 생성하고 필요한 모듈을 다운로드해야 합니다. 먼저 명령줄에서 프로젝트 디렉터리를 만들고 다음을 입력합니다. 

mkdir myChatRoom
cd myChatRoom

그런 다음 npm을 사용하여 프로젝트를 초기화합니다. 

npm init

다음으로 사용해야 하는 모듈을 설치합니다. 

npm i express socket.io -S

위 명령에서:

  • express는 일반적으로 HTTP 요청 및 응답을 처리하는 데 사용되는 nodejs 웹 프레임워크를 사용했습니다.
  • socket.io는 웹소켓 캡슐화를 기반으로 한 실시간 통신 라이브러리입니다.
  1. 서버 측 코드 구현

프로젝트 루트 디렉터리에서 index.js 파일을 생성하고 여기에 다음 코드를 붙여넣습니다. 

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

app.use(express.static(__dirname + '/public'));

const onlineUsers = {};
const onlineCount = 0;

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

  socket.on('login', (user) => {
    socket.nickname = user.username;
    // check if the user already exists
    if (!onlineUsers.hasOwnProperty(socket.nickname)) {
      onlineUsers[socket.nickname] = user.avatar;
      onlineCount++;
    }

    io.emit('login', { onlineUsers, onlineCount, user });
    console.log(`user ${user.username} joined`);
  });

  socket.on('chatMessage', (msg) => {
    io.emit('chatMessage', { nickname: socket.nickname, message: msg });
  });

  socket.on('disconnect', () => {
    if (onlineUsers.hasOwnProperty(socket.nickname)) {
      const userLeft = { username: socket.nickname, avatar: onlineUsers[socket.nickname] };
      delete onlineUsers[socket.nickname];
      onlineCount--;

      io.emit('logout', { onlineUsers, onlineCount, user: userLeft });
      console.log(`user ${userLeft.username} left`);
    }
  });
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

위 코드에서는 http 서버를 시작하고 소켓.io를 사용했습니다. HTTP 서비스가 웹소켓을 지원하도록 업그레이드되었습니다. 그런 다음 여러 소켓 이벤트를 정의한 것을 볼 수 있습니다.

  1. 새 소켓 연결이 있으면 서버가 연결 이벤트를 보내고 "사용자 연결됨"을 출력합니다.
  2. 사용자가 로그인하면 서버는 로그인 이벤트를 보내고 해당 사용자의 정보를 온라인 사용자 목록에 추가한 다음, 서버는 온라인 사용자 목록을 다른 사용자에게 브로드캐스팅합니다.
  3. 사용자가 메시지를 보내면 서버는 chatMessage 이벤트를 보내고 모든 온라인 사용자에게 메시지를 브로드캐스트합니다.
  4. 사용자 연결이 끊어지면 서버는 연결 끊김 이벤트를 보내고 온라인 사용자 목록에서 해당 사용자를 삭제합니다.

4. 채팅방 클라이언트 구축

  1. html 파일 만들기

프로젝트의 공개 디렉터리에서 html 파일을 만들고 다음 코드를 파일에 복사합니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chatroom</title>
    <style>
        #nickname {
            display: none;
        }

        #messages {
            height: 300px;
            overflow-y: scroll;
            margin-bottom: 10px;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            margin-top: 10px;
        }

        img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id="loginPanel">
    <p>输入一个昵称:</p>
    <input type="text" id="nicknameInput">
    <button id="submit">进入聊天室</button>
</div>
<div id="chatroom" style="display:none;">
    <div id="nickWrapper">
        <img id="avatarImg" src=""/>
        <span id="nickname"></span>
        <button id="logout">退出聊天室</button>
    </div>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="请输入聊天信息">
    <button id="sendBtn">发送</button>
</div>

<script src="./socket.io/socket.io.js"></script>
<script src="./chat.js"></script>
</body>
</html>

위 코드에서 우리는 HTML에는 닉네임 입력 상자, 채팅방 입장 버튼, 채팅방 종료 버튼, ID가 "messages"인 요소, 메시지 보내기 입력 상자, 메시지 보내기 버튼이 추가됩니다. 그 중 채팅방 입장 후 닉네임 입력창과 채팅방 입장 버튼이 숨겨지며, 온라인 이용자의 닉네임과 아바타가 표시된다.

  1. 채팅방 클라이언트 JS 코드 만들기

공용 디렉터리에 chat.js 파일을 만들고 다음 코드를 붙여넣으세요.

const socket = io();
const submitBtn = document.querySelector('#submit');
const logoutBtn = document.querySelector('#logout');
const sendBtn = document.querySelector('#sendBtn');
const messageInput = document.querySelector('#messageInput');
const nicknameInput = document.querySelector('#nicknameInput');
const chatWrapper = document.querySelector('#chatroom');
const loginPanel = document.querySelector('#loginPanel');
const avatarImg = document.querySelector('#avatarImg');
const nickname = document.querySelector('#nickname');
const messages = document.querySelector('#messages');

let avatar;


// 提交昵称登录
submitBtn.addEventListener('click', function () {
  const nickname = nicknameInput.value;
  if (nickname.trim().length > 0) {
    avatar = `https://avatars.dicebear.com/api/bottts/${Date.now()}.svg`;
    socket.emit('login', { username: nickname, avatar: avatar });
  } else {
    alert('昵称为空，请重新输入');
    nicknameInput.value = '';
    nicknameInput.focus();
  }
});

// 退出登录
logoutBtn.addEventListener('click', function () {
  socket.disconnect();
});

// 发送消息
sendBtn.addEventListener('click', function () {
  const msg = messageInput.value.trim();
  if (msg.length > 0) {
    socket.emit('chatMessage', msg);
    messageInput.value = '';
    messageInput.focus();
  }
});

// 回车发送消息
messageInput.addEventListener('keyup', function (e) {
  e.preventDefault();
  if (e.keyCode === 13) {
    sendBtn.click();
  }
});

// 服务器发送登录信号
socket.on('login', (info) => {
  loginPanel.style.display = 'none';
  chatWrapper.style.display = 'block';
  avatarImg.src = avatar;
  nickname.innerText = nicknameInput.value;
  renderUserList(info.onlineUsers);
});

// 服务器发送聊天消息信号
socket.on('chatMessage', (data) => {
  renderChatMessage(data.nickname, data.message);
});

// 服务器发送退出信号
socket.on('logout', (info) => {
  renderUserList(info.onlineUsers);
});

// 渲染在线用户列表
function renderUserList(users) {
  const list = document.createElement('ul');
  Object.keys(users).forEach((nickname) => {
    const item = `
    <li>
      <img src="${users[nickname]}"/>
      <span>${nickname}</span>
    </li>
    `;
    list.innerHTML += item;
  });
  chatWrapper.insertBefore(list, messages);
}

// 渲染聊天消息
function renderChatMessage(nickname, message) {
  const msg = document.createElement('div');
  msg.innerHTML = `<p>${nickname}: ${message}</p>`;
  messages.appendChild(msg);
}

위 코드에서는 다음 기능을 구현했습니다.

  1. user "로그인" 버튼을 클릭하면 "로그인" 이벤트가 서버로 전송되고 서버는 내부적으로 사용자를 "온라인 사용자" 목록에 추가하고 현재 "온라인 사용자" 목록을 모든 사용자에게 푸시하도록 위임됩니다. 방송을 통해 고객.
  2. 채팅 메시지가 있으면 서버는 "chatMessage" 이벤트를 보내고 메시지 내용을 브로드캐스트를 통해 모든 클라이언트에게 푸시합니다.
  3. 사용자 연결이 끊어지면 "온라인 사용자 목록"은 사용자 목록에서 사용자를 삭제하고 현재 "온라인 사용자" 목록을 브로드캐스트를 통해 모든 클라이언트에 푸시합니다.

5. 프로젝트 실행

명령줄에서 프로젝트 루트 디렉터리로 이동하고 다음 명령을 입력하여 프로젝트를 시작합니다. 

node index.js

그런 다음 브라우저에 http://localhost:3000/을 입력하여 서버에 액세스합니다. 그리고 채팅방에 들어갑니다.

6. 요약

이 기사에서는 채팅방을 구축하는 간단하고 안정적이며 효율적인 방법을 제공하는 nodejs와 소켓.io를 기반으로 간단한 채팅방을 구현했습니다. 비록 아주 기본적인 대화방에 불과하지만, 이 글의 소개와 실습을 통해 독자들이 nodejs를 이용한 대화방 구축에 대한 전반적인 이해를 가질 수 있을 것이라 믿습니다.

위 내용은 nodejs로 대화방 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Vue에서 손떨림 방지를 수행하는 방법다음 기사：Vue에서 손떨림 방지를 수행하는 방법

관련 기사

더보기