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

实时在线投票系统

请选择您的投票选项：

当前投票结果：

ホームページ

ウェブフロントエンド

jsチュートリアル

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

PHPz

Dec 18, 2023 pm 04:27 PM

javascript websocket ライブオンライン投票

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 id="实时在线投票系统">实时在线投票系统</h1>
  <div id="options">
    <h2 id="请选择您的投票选项">请选择您的投票选项：</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 id="当前投票结果">当前投票结果：</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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7488

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Java と WebSocket の組み合わせ: リアルタイムのビデオストリーミングを実現する方法 Dec 17, 2023 pm 05:50 PM

インターネット技術の継続的な発展に伴い、リアルタイムビデオストリーミングはインターネット分野における重要なアプリケーションとなっています。リアルタイムのビデオストリーミングを実現するための主要なテクノロジには、WebSocket と Java が含まれます。この記事では、WebSocket と Java を使用してリアルタイムのビデオストリーミング再生を実装する方法を紹介し、関連するコード例を示します。 1. WebSocket とは WebSocket は、単一の TCP 接続で全二重通信を行うためのプロトコルであり、Web 上で使用されます。

PHPとWebSocketを使ってリアルタイム通信を実現する方法 Dec 17, 2023 pm 10:24 PM

インターネット技術の継続的な発展により、リアルタイム通信は日常生活に欠かせないものになりました。 WebSocket テクノロジーを使用すると、効率的で低遅延のリアルタイム通信を実現できます。また、インターネット分野で最も広く使用されている開発言語の 1 つである PHP も、対応する WebSocket サポートを提供します。この記事では、PHP と WebSocket を使用してリアルタイム通信を実現する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は単一の

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

PHP と WebSocket: リアルタイムデータ転送のベストプラクティス Dec 18, 2023 pm 02:10 PM

PHP と WebSocket: リアルタイムデータ転送のベストプラクティス方法はじめに: Web アプリケーション開発では、リアルタイムデータ転送は非常に重要な技術要件です。従来の HTTP プロトコルは要求応答モデルのプロトコルであり、リアルタイムのデータ送信を効果的に実現できません。リアルタイムデータ送信のニーズを満たすために、WebSocket プロトコルが登場しました。 WebSocket は、単一の TCP 接続上で全二重通信を行う方法を提供する全二重通信プロトコルです。 Hと比べて

Java Websocket はオンラインホワイトボード機能をどのように実装しますか? Dec 17, 2023 pm 10:58 PM

JavaWebsocket はオンラインホワイトボード機能をどのように実装しますか?現代のインターネット時代では、人々はリアルタイムのコラボレーションと対話の経験にますます注目しています。オンラインホワイトボードは、Websocketをベースに実装された機能で、複数のユーザーがリアルタイムで共同作業して同じ描画ボードを編集し、描画や注釈などの操作を完了できるようにし、オンライン教育、リモート会議、チームコラボレーション、他のシナリオ。 1. 技術的背景 WebSocket は HTML5 で提供される新しいプロトコルです。

SSE と WebSocket Apr 17, 2024 pm 02:18 PM

この記事では、どちらも信頼できるデータ配信方法である Server Sent Events (SSE) と WebSocket を比較します。通信方向、基盤となるプロトコル、セキュリティ、使いやすさ、パフォーマンス、メッセージ構造、使いやすさ、テストツールを含む 8 つの側面で分析します。これらの側面の比較は次のように要約されます。カテゴリサーバー送信イベント (SSE) WebSocket の通信方向単方向双方向基礎となるプロトコル HTTP WebSocket プロトコルのセキュリティ HTTP と同じ既存のセキュリティの脆弱性使いやすさセットアップが簡単セットアップが複雑パフォーマンスが速いメッセージ送信速度が高いメッセージ処理の影響を受けるおよび接続管理メッセージ構造プレーンテキストまたはバイナリ使いやすさ広く利用可能 WebSocket の統合に役立つ

golang WebSocket プログラミングのヒント: 同時接続の処理 Dec 18, 2023 am 10:54 AM

Golang は強力なプログラミング言語であり、WebSocket プログラミングでの Golang の使用が開発者の間でますます評価されています。 WebSocket は、クライアントとサーバー間の双方向通信を可能にする TCP ベースのプロトコルです。この記事では、Golang を使用して、複数の同時接続を同時に処理する効率的な WebSocket サーバーを作成する方法を紹介します。テクニックを紹介する前に、まず WebSocket とは何かを学びましょう。 WebSocketWeb の概要

リアルタイム翻訳機能を実装するためのPHP Websocket開発ガイド Dec 18, 2023 pm 05:52 PM

PHP Websocket 開発ガイド: リアルタイム変換機能の実装はじめに: インターネットの発展に伴い、さまざまなアプリケーションシナリオでリアルタイム通信の重要性がますます高まっています。新しい通信プロトコルとして、Websocket はリアルタイム通信を適切にサポートします。この記事では、PHP を使用して Websocket アプリケーションを開発し、リアルタイム翻訳機能を組み合わせてその具体的なアプリケーションをデモンストレーションする方法を詳しく説明します。 1. Websocket プロトコルとは何ですか? Websocket プロトコルは、

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック