온라인 채팅방에서 WebSocket 기술의 실제 적용-PHP 튜토리얼-php.cn

온라인 채팅방에서 WebSocket 기술의 실제 적용

WBOY

풀어 주다： 2023-10-15 11:50:02

원래의

1265명이 탐색했습니다.

온라인 채팅방에서 WebSocket 기술의 실제 적용

온라인 채팅방에서의 WebSocket 기술의 실용화

인터넷의 급속한 발전과 함께 인스턴트 메시징에 대한 사람들의 수요는 점점 더 높아지고 있습니다. 기존 HTTP 프로토콜은 데이터를 전송할 수 있지만 매번 요청을 시작해야 하므로 비효율적입니다. 이런 문제를 해결하기 위해 WebSocket 기술이 등장했습니다. WebSocket 기술은 브라우저와 서버 사이에 지속적인 양방향 통신 채널을 구축하여 데이터 전송의 효율성과 실시간 성능을 크게 향상시킬 수 있으므로 온라인 채팅방에서 널리 사용되었습니다.

WebSocket의 장점:

낮은 대기 시간: 기존 HTTP 요청-응답 모델과 비교하여 WebSocket 기술은 지속적인 연결을 설정하고, 즉각적인 통신을 달성하며, 채팅 콘텐츠를 다른 사용자에게 더 빠르게 보낼 수 있습니다.
더 적은 네트워크 트래픽: WebSocket 기술은 매번 HTTP 요청을 보내는 대신 연결을 설정하여 데이터를 여러 번 전송합니다. 이렇게 하면 패킷 수가 줄어들고 네트워크 트래픽이 줄어듭니다.
더 나은 호환성: WebSocket 기술의 표준은 성숙해졌으며 추가 플러그인이나 라이브러리 없이도 최신 브라우저에서 널리 지원됩니다.

다음은 WebSocket 기술의 실제 적용을 소개하기 위해 온라인 채팅방을 예로 들어 보겠습니다.

먼저 서버 측에서는 Node.js를 백엔드 언어로 사용합니다. Node.js를 사용하면 개발에 JavaScript 언어를 사용할 수 있어 프런트 엔드와의 상호 작용이 용이해진다는 장점이 있습니다.

//引入WebSocket模块
const WebSocket = require('ws');

//创建WebSocket服务器
const wss = new WebSocket.Server({ port: 3000 });

//保存连接的用户
const users = new Set();

//WebSocket服务端启动成功后的回调函数
wss.on('listening', () => {
  console.log('WebSocket server is running on port 3000.');
});

//处理WebSocket连接
wss.on('connection', (ws) => {
  //将新用户添加到用户列表中
  users.add(ws);

  //监听消息事件
  ws.on('message', (message) => {
    //将消息发送给其他用户
    users.forEach((user) => {
      if (user !== ws) {
        user.send(message);
      }
    });
  });

  //监听连接关闭事件
  ws.on('close', () => {
    //将用户从用户列表中移除
    users.delete(ws);
  });
});

로그인 후 복사

클라이언트 측에서는 HTML, CSS, JavaScript를 사용하여 사용자 인터페이스와 서버와의 통신을 구현합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>在线聊天室</title>
  <style>
    #chat { width: 400px; height: 300px; margin-bottom: 10px; overflow-y: auto; }
  </style>
</head>
<body>
  <div id="chat"></div>
  <input type="text" id="message" placeholder="请输入消息">
  <button id="send">发送</button>

  <script>
    const chat = document.getElementById('chat');
    const messageInput = document.getElementById('message');
    const sendButton = document.getElementById('send');

    //创建WebSocket连接
    const ws = new WebSocket('ws://localhost:3000');

    //监听WebSocket连接成功事件
    ws.addEventListener('open', () => {
      console.log('WebSocket connection is established.');
    });

    //监听WebSocket接收到消息事件
    ws.addEventListener('message', (event) => {
      const message = event.data;
      const messageNode = document.createElement('p');
      messageNode.textContent = message;
      chat.appendChild(messageNode);
    });

    //发送消息
    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      ws.send(message);
      messageInput.value = '';
    });
  </script>
</body>
</html>

로그인 후 복사

위 코드는 간단한 온라인 채팅방을 구현한 코드입니다. 사용자가 브라우저를 통해 페이지에 접속하면 WebSocket 연결이 이루어지고 사용자가 입력한 메시지가 서버로 전송됩니다. 서버는 수신된 메시지를 연결된 다른 사용자에게 전달하여 실시간 채팅 기능을 구현합니다.

WebSocket 기술을 통해 온라인 채팅방의 실질적인 적용이 실현됩니다. WebSocket의 양방향 통신은 시간 지연과 네트워크 트래픽을 효과적으로 줄여 더 나은 사용자 경험을 제공할 수 있습니다. WebSocket 기술이 계속해서 발전하고 개선되면서 더 많은 분야에 적용되고 활성화될 것이라고 믿습니다.

위 내용은 온라인 채팅방에서 WebSocket 기술의 실제 적용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!