Rumah > hujung hadapan web > tutorial js > Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem tinjauan soal selidik dalam talian masa nyata

Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem tinjauan soal selidik dalam talian masa nyata

王林
Lepaskan: 2023-12-17 08:02:36
asal
1413 orang telah melayarinya

Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem tinjauan soal selidik dalam talian masa nyata

Cara melaksanakan sistem tinjauan soal selidik dalam talian masa nyata menggunakan JavaScript dan WebSocket

Pengenalan:
Dengan perkembangan berterusan Internet, semakin banyak soal selidik telah mula dipindahkan dalam talian. Untuk mendapatkan maklum balas pengguna dalam masa nyata, sistem soal selidik dalam talian masa nyata menjadi alat yang diperlukan. Artikel ini akan memperkenalkan cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem soal selidik dalam talian masa nyata yang mudah, dan memberikan contoh kod khusus.

1. Pemilihan Teknologi
Apabila melaksanakan sistem tinjauan soal selidik dalam talian masa nyata, kami memilih untuk menggunakan JavaScript dan WebSocket sebagai teknologi utama untuk pelaksanaan. JavaScript ialah bahasa skrip berorientasikan objek merentas platform yang boleh digunakan untuk pembangunan skrip sebelah pelayar. WebSocket ialah protokol untuk komunikasi dupleks penuh pada sambungan TCP tunggal, yang membolehkan pelayan menolak data secara aktif kepada klien.

2. Senibina Sistem
Seni bina sistem tinjauan soal selidik dalam talian masa nyata terbahagi kepada dua bahagian: bahagian hadapan dan bahagian belakang.

1. Bahagian hujung hadapan
Bahagian hujung hadapan terutamanya termasuk antara muka pengguna dan kod JavaScript. Antara muka pengguna bertanggungjawab untuk memaparkan soal selidik dan menerima maklum balas pengguna, manakala kod JavaScript bertanggungjawab untuk mewujudkan sambungan WebSocket dengan bahagian belakang dan menerima keputusan soal selidik dalam masa nyata.

2. Bahagian belakang
Bahagian bahagian belakang bertanggungjawab terutamanya untuk menerima jawapan soal selidik yang dikemukakan oleh pengguna dan menyiarkan keputusan soal selidik kepada semua pelanggan yang berkaitan. Bahagian belakang boleh menggunakan mana-mana pelayan yang menyokong WebSocket, seperti Node.js, Java, Python, dsb. Langkah pelaksanaan alamat dan port pelayan untuk mewujudkan sambungan. Kami kemudian mengendalikan interaksi dengan pelayan dengan mendengar acara seperti onopen, onmessage dan onclose.

2. Pelaksanaan Backend
Seterusnya, kami perlu melaksanakan pelayan WebSocket di bahagian belakang untuk menerima jawapan soal selidik yang diserahkan oleh pengguna dan menyiarkannya kepada semua pelanggan yang berkaitan. Mengambil Node.js sebagai contoh, kita boleh menggunakan perpustakaan ws untuk membina pelayan WebSocket dengan cepat.

Mula-mula, kita perlu memasang perpustakaan ws:

<script>
  var socket = new WebSocket("ws://localhost:8080"); // 连接WebSocket服务器

  socket.onopen = function() {
    // 连接建立成功
  };

  socket.onmessage = function(event) {
    // 接收到服务器发送的数据
    var data = JSON.parse(event.data);
    // 处理问卷调查结果
  };

  socket.onclose = function(event) {
    // 连接关闭
  };
</script>
Salin selepas log masuk
onopenonmessageonclose等事件来处理与服务器的交互。

2.后端实现
接下来,我们需要在后端实现WebSocket服务器来接收用户提交的问卷答案,并广播给所有连接的客户端。以Node.js为例,我们可以使用ws库来快速搭建WebSocket服务器。

首先,我们需要安装ws库:

$ npm install ws
Salin selepas log masuk

然后,在Node.js中编写服务器代码,如下所示:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    // 接收到客户端发送的数据
    // 处理问卷答案
    // 广播问卷调查结果给所有连接的客户端
    wss.clients.forEach(function(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(result));
      }
    });
  });
});
Salin selepas log masuk

在以上代码中,我们先创建了一个WebSocket.Server实例,并监听指定的端口。然后,我们通过监听connection事件来处理客户端的连接请求。在连接建立成功后,我们又监听了messageKemudian, tulis kod pelayan dalam Node.js seperti berikut:

rrreee

Dalam kod di atas, kita mula-mula mencipta Pelayan Web instance dan dengar pada port yang ditentukan. Kemudian, kami mengendalikan permintaan sambungan pelanggan dengan mendengar acara connection. Selepas sambungan berjaya diwujudkan, kami mendengar acara mesej untuk memproses mesej yang dihantar oleh klien. Selepas menerima mesej, kami memproses jawapan soal selidik dan menyiarkan keputusan soal selidik dengan menggelungkan melalui semua pelanggan yang bersambung.

4. Ringkasan

Melalui JavaScript dan WebSocket, kami boleh melaksanakan sistem soal selidik dalam talian masa nyata dengan mudah. Bahagian hadapan bertanggungjawab untuk memaparkan soal selidik dan menerima maklum balas daripada pengguna, manakala bahagian belakang memproses jawapan soal selidik yang dikemukakan oleh pengguna dan menyiarkan keputusan soal selidik kepada semua pelanggan yang berkaitan dalam masa nyata. Melalui komunikasi dupleks penuh WebSocket, kami boleh mendapatkan maklum balas pengguna dalam masa nyata untuk menganalisis dan mengoptimumkan produk dengan lebih baik.

🎜Di atas adalah contoh pelaksanaan sistem soal selidik dalam talian masa nyata yang mudah saya harap ia akan membantu anda dalam melaksanakan sistem yang serupa. Sudah tentu, dalam aplikasi praktikal, keselamatan, kestabilan, dan peningkatan fungsi lain juga perlu dipertimbangkan. Saya berharap sistem soal selidik dalam talian anda boleh mencapai keputusan yang baik! 🎜

Atas ialah kandungan terperinci Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem tinjauan soal selidik dalam talian masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan