JavaScript와 WebSocket을 사용하여 실시간 온라인 투표 시스템을 구현하는 방법-JS 튜토리얼-php.cn

JavaScript와 WebSocket을 사용하여 실시간 온라인 투표 시스템을 구현하는 방법

PHPz

풀어 주다： 2023-12-18 16:27:39

원래의

1065명이 탐색했습니다.

JavaScript와 WebSocket을 사용하여 실시간 온라인 투표 시스템을 구현하는 방법

JavaScript 및 WebSocket을 사용하여 실시간 온라인 투표 시스템을 구현하는 방법

소개:
인터넷의 급속한 발전으로 실시간 온라인 투표 시스템은 다양한 활동과 선거에서 매우 일반적인 형태가 되었습니다. 실시간 온라인 투표 시스템을 구현하기 위해 JavaScript와 WebSocket 기술을 사용하면 유연성과 사용 편의성이라는 장점이 있습니다. 이 기사에서는 JavaScript와 WebSocket을 사용하여 간단한 실시간 온라인 투표 시스템을 구현하는 방법을 자세히 소개하고 해당 코드 예제를 제공합니다.

1. 실시간 온라인 투표 시스템의 기본 아키텍처
실시간 온라인 투표 시스템의 기본 아키텍처는 일반적으로 다음 부분으로 구성됩니다.

프런트엔드 HTML 페이지: 투표 옵션을 표시하고 투표 결과를 업데이트하는 데 사용되는 페이지 실시간.
백엔드 서버: 클라이언트가 보낸 투표 요청을 처리하고 투표 결과를 연결된 모든 클라이언트에 실시간으로 보내는 데 사용됩니다.
WebSocket 연결: 실시간 양방향 통신을 구현하고 투표가 변경될 때 페이지를 업데이트하는 데 사용됩니다.

2. 프런트엔드 HTML 페이지 디자인 및 구현

페이지 레이아웃:
먼저 투표 옵션과 실시간 투표 결과 표시 영역을 포함한 간단한 페이지 레이아웃을 디자인해야 합니다. 페이지 레이아웃은 아래와 같이 HTML과 CSS를 사용하여 구현할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>实时在线投票系统</title>
  <style>
    /* 页面布局样式 */
    /* ... */
  </style>
</head>
<body>
  <h1>实时在线投票系统</h1>
  <div id="options">
    <h2>请选择您的投票选项：</h2>
    <ul>
      <li><button onclick="vote(1)">选项1</button></li>
      <li><button onclick="vote(2)">选项2</button></li>
      <li><button onclick="vote(3)">选项3</button></li>
    </ul>
  </div>
  <div id="result">
    <h2>当前投票结果：</h2>
    <p>选项1： <span id="count1">0</span> 票</p>
    <p>选项2： <span id="count2">0</span> 票</p>
    <p>选项3： <span id="count3">0</span> 票</p>
  </div>
  
  <script src="websocket.js"></script>
  <script>
    // 实时更新投票结果
    function updateResult(counts) {
      document.getElementById('count1').innerText = counts[1];
      document.getElementById('count2').innerText = counts[2];
      document.getElementById('count3').innerText = counts[3];
    }
  
    // 发送投票请求
    function vote(option) {
      // 发送投票请求给后端
      sendVoteRequest(option);
    }
  </script>
</body>
</html>

로그인 후 복사

JavaScript 코드:
위 HTML 코드에는 주로 투표 기능 구현 및 백엔드 서버와의 통신을 담당하는 일부 JavaScript 코드가 포함되어 있습니다. WebSocket 서버와의 통신을 처리하려면 아래와 같이 websocket.js라는 JavaScript 파일을 작성해야 합니다.

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

// 连接建立时触发
socket.onopen = function(event) {
  console.log('WebSocket连接已建立');
};

// 接收投票结果
socket.onmessage = function(event) {
  const counts = JSON.parse(event.data);
  updateResult(counts);
};

// 连接关闭时触发
socket.onclose = function(event) {
  console.log('WebSocket连接已关闭');
};

// 向服务器发送投票请求
function sendVoteRequest(option) {
  const message = {
    type: 'vote',
    option: option
  };
  socket.send(JSON.stringify(message));
}

로그인 후 복사

3. 백엔드 서버 구축 및 구현
백엔드 서버는 Node.js를 사용하여 구축되며 WebSocket 라이브러리의 코드 예시는 다음과 같습니다.

const WebSocket = require('ws');

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

// 记录投票结果
let counts = {
  1: 0,
  2: 0,
  3: 0
};

// 处理客户端连接请求
wss.on('connection', function(ws) {
  console.log('客户端已连接');

  // 发送当前投票结果给客户端
  ws.send(JSON.stringify(counts));

  // 处理客户端发送的消息
  ws.on('message', function(message) {
    const data = JSON.parse(message);

    // 根据投票选项更新投票结果
    if (data.type === 'vote') {
      counts[data.option] += 1;

      // 发送更新后的投票结果给所有连接的客户端
      wss.clients.forEach(function(client) {
        client.send(JSON.stringify(counts));
      });
    }
  });

  // 连接关闭时触发
  ws.on('close', function() {
    console.log('客户端已断开连接');
  });
});

console.log('WebSocket服务器已启动');

로그인 후 복사

4. 실행 및 테스트

Node.js 및 WebSocket 라이브러리 설치:
위 코드를 실행하기 전에 Node.js를 설치하고 다음을 통해 WebSocket 라이브러리를 설치해야 합니다. npm 터미널을 열고 다음 명령을 실행합니다:
```
$ npm install websocket
```
로그인 후 복사
백엔드 서버 시작:
터미널에서 위 백엔드 서버 코드가 저장된 디렉터리를 입력하고 다음 명령을 실행하여 백엔드 서버를 시작합니다.
```
$ node server.js
```
로그인 후 복사
브라우저에서 프런트엔드 페이지 열기:
투표를 시작하려면 위의 프런트엔드 HTML 페이지가 포함된 파일을 브라우저에서 엽니다.

요약:
위의 단계를 통해 JavaScript와 WebSocket을 사용하여 간단한 실시간 온라인 투표 시스템을 성공적으로 구현했습니다. 이 시스템을 기반으로 우리는 기능을 더욱 확장하고 보다 복잡한 투표 시스템을 구현할 수 있습니다. JavaScript와 WebSocket 기술을 유연하게 사용하여 인터넷에서 다양한 실시간 애플리케이션을 구축할 수 있습니다.

위 내용은 JavaScript와 WebSocket을 사용하여 실시간 온라인 투표 시스템을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!