JavaScriptとWebSocketを使用してリアルタイムオンライン投票システムを実装する方法-jsチュートリアル-php.cn

JavaScriptとWebSocketを使用してリアルタイムオンライン投票システムを実装する方法

PHPz

リリース： 2023-12-18 16:27:39

オリジナル

1179 人が閲覧しました

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 をインストールし、npm 経由で WebSocket ライブラリをインストールする必要があります。ターミナルを開いて次のコマンドを実行します:
```
$ npm install websocket
```
ログイン後にコピー
バックエンドサーバーを起動します:
ターミナルで、上記のバックエンドサーバーコードが保存されているディレクトリを入力し、次のコマンドを実行してバックエンドサーバーを起動します:
```
$ node server.js
```
ログイン後にコピー
ブラウザでフロントエンドページを開きます:
参照上記のフロントエンド HTML ページを含むファイルをブラウザで開き、投票を開始します。

概要:
上記の手順により、JavaScript と WebSocket を使用したシンプルなリアルタイムオンライン投票システムの実装に成功しました。このシステムをベースに、さらに機能を拡張し、より複雑な投票システムを実現することができます。 JavaScriptとWebSocket技術を柔軟に活用することで、インターネット上にさまざまなリアルタイムアプリケーションを構築できます。

以上がJavaScriptとWebSocketを使用してリアルタイムオンライン投票システムを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。