JavaScript를 사용하여 간단한 채팅 애플리케이션을 구현하는 방법-프런트엔드 Q&A-php.cn

1. WebSocket 생성

2. 메시지 보내기 및 받기

3. 채팅 애플리케이션 테스트

집

웹 프론트엔드

프런트엔드 Q&A

JavaScript를 사용하여 간단한 채팅 애플리케이션을 구현하는 방법

PHPz

Apr 18, 2023 pm 06:21 PM

최근 몇 년간 인터넷 기술의 지속적인 발전으로 인스턴트 메시징은 사람들의 일상생활에서 없어서는 안 될 부분이 되었습니다. 요즘 채팅 도구는 사람들이 의사소통을 하는 중요한 수단 중 하나가 되었습니다. 이 기사에서는 JavaScript를 사용하여 간단한 채팅 애플리케이션을 구현하는 방법을 소개합니다.

1. 기본 지식

채팅 애플리케이션 구현을 시작하기 전에 HTML, CSS, JavaScript 등 기본적인 프런트엔드 개발 지식을 숙지해야 합니다. 아직 이러한 기술을 익히지 않았다면 먼저 기본 사항을 배우십시오.

2. 채팅 애플리케이션의 인터페이스 디자인

채팅 애플리케이션을 구현하기 전에 먼저 간단한 인터페이스를 디자인해야 합니다. 이 애플리케이션에서는 HTML과 CSS를 사용하여 웹 페이지 레이아웃을 만들고 JavaScript를 사용하여 사용자와 상호 작용합니다.

먼저 HTML 파일을 만든 다음 페이지에 텍스트 상자와 전송 버튼을 추가해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>简易聊天应用</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="chat-log"></div>
  <input id="chat-input" type="text" placeholder="请输入一些文字...">
  <button id="send-button">发送</button>
  
  <script src="app.js"></script>
</body>
</html>

로그인 후 복사

다음으로 CSS 파일에서 페이지 스타일을 설정합니다.

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

#chat-log {
  background-color: #ffffff;
  height: 400px;
  max-width: 600px;
  margin: 20px auto;
  overflow: scroll;
  padding: 10px;
}

#chat-input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
  border: 2px solid #cccccc;
}

#send-button {
  display: block;
  margin: 20px auto;
  border: none;
  background-color: #4285f4;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 20px;
  cursor: pointer;
}

로그인 후 복사

마지막으로 대화형 기능을 사용하려면 JavaScript 코드를 작성해야 합니다. 다음 섹션에서는 JavaScript를 사용하여 간단한 채팅 애플리케이션을 만드는 방법을 안내합니다.

3. JavaScript를 사용하여 채팅 애플리케이션 구현

1. WebSocket 생성

WebSocket은 클라이언트와 서버 간의 새로운 유형의 양방향 통신 기술입니다. 이를 사용하여 실시간 채팅 애플리케이션을 만들 수 있습니다.

우리 애플리케이션에서는 클라이언트가 서버와 통신할 수 있도록 WebSocket을 생성해야 합니다. 아직 WebSocket을 모른다면 먼저 기본 사항을 알아보세요.

다음은 WebSocket을 생성하는 방법에 대한 JavaScript 코드입니다.

const socket = new WebSocket('ws://localhost:3000');

socket.addEventListener('open', function (event) {
  console.log('服务器已连接');
});

socket.addEventListener('message', function (event) {
  console.log('服务器发送了一条消息: ', event.data);
});

socket.addEventListener('close', function (event) {
  console.log('服务器已关闭');
});

socket.addEventListener('error', function (event) {
  console.log('服务器发生了错误');
});

로그인 후 복사

위 코드에서는 WebSocket API를 사용하여 WebSocket 인스턴스를 생성했습니다. 우리가 전달하는 매개변수는 서버의 주소이므로 실제 서버 주소에 따라 여기에서 매개변수를 수정하세요.

WebSocket을 생성한 후 열기, 메시지, 닫기 및 오류 이벤트를 여기에 바인딩해야 합니다. 이러한 이벤트는 서버에 대한 성공적인 연결, 메시지 수신, 연결 종료 및 오류를 나타냅니다.

2. 메시지 보내기 및 받기

채팅 애플리케이션을 구현할 때 사용자가 입력한 메시지를 서버에 보내고 다른 사용자가 보낸 메시지를 받기 위한 코드를 작성해야 합니다.

메시지 보내기 작업은 매우 간단합니다. 사용자가 "보내기" 버튼을 클릭할 때 페이지의 텍스트 상자에 값을 가져와서 WebSocket을 통해 서버로 보내기만 하면 됩니다.

const inputElement = document.querySelector('#chat-input');
const sendButtonElement = document.querySelector('#send-button');

sendButtonElement.addEventListener('click', function(event) {
  event.preventDefault();

  const message = inputElement.value;
  inputElement.value = '';

  socket.send(message);
});

로그인 후 복사

위 코드는 사용자가 "보내기" 버튼을 클릭하면 텍스트 상자의 값을 가져와 WebSocket을 통해 서버로 보냅니다. 코드를 더욱 강력하게 만들기 위해 "sendButtonElement" 요소에 클릭 이벤트도 추가하겠습니다.

다음으로, 다른 사용자가 보낸 메시지를 수신하는 코드를 작성해야 합니다. 이 기능을 구현하면 채팅 애플리케이션을 더욱 유용하게 만들 수 있습니다. 메시지가 수신되면 사용자가 메시지를 볼 수 있도록 페이지의 채팅 기록을 업데이트해야 합니다.

const chatLogElement = document.querySelector('#chat-log');

socket.addEventListener('message', function(event) {
  const message = event.data;

  const chatMessageElement = document.createElement('div');
  chatMessageElement.innerText = message;

  chatLogElement.appendChild(chatMessageElement);
});

로그인 후 복사

위 코드에서는 addEventListener 메서드를 사용하여 WebSocket에 대한 메시지 이벤트를 바인딩합니다. 서버가 메시지를 보내면 먼저 데이터를 텍스트 메시지로 연결한 다음 div 요소를 만들고 여기에 메시지를 추가합니다.

3. 채팅 애플리케이션 테스트

이제 채팅 애플리케이션이 거의 완성되었습니다. 테스트하려면 로컬 컴퓨터에서 Node.js 서버를 시작하고 브라우저에서 채팅 앱 페이지를 열 수 있습니다.

Node.js 서버를 시작하려면 터미널에 다음 명령을 입력하세요.

node app.js

로그인 후 복사

그 중 app.js는 우리가 작성한 서버 코드의 파일 이름입니다. 아직 이 코드를 작성하지 않았다면 먼저 Node.js를 사용하여 WebSocket을 구현하는 방법에 대한 튜토리얼을 참조하세요.

이제 브라우저에서 채팅 페이지를 열고 텍스트 상자에 메시지를 입력할 수 있습니다. 그런 다음 "보내기" 버튼을 클릭하세요. 이제 채팅 기록에 입력한 메시지가 표시됩니다.

#### 4. 요약

JavaScript는 매우 실용적인 채팅 애플리케이션을 작성하는 데 사용할 수 있는 강력한 프로그래밍 언어입니다. 이번 글에서는 WebSocket을 사용하여 간단한 채팅 애플리케이션을 구현하는 방법을 소개했습니다. HTML, CSS, JavaScript를 사용하여 페이지를 생성하고 WebSocket을 사용하여 실시간 통신을 구현했습니다. 아직 이러한 기술을 익히지 않았다면 이 작은 프로젝트를 시작하기 전에 이러한 기본 사항을 익히는 것이 좋습니다.

위 내용은 JavaScript를 사용하여 간단한 채팅 애플리케이션을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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