Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système d'enquête par questionnaire en ligne en temps réel

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de questionnaires en ligne en temps réel

Introduction :
Avec le développement continu d'Internet, de plus en plus de questionnaires ont commencé à migrer en ligne. Afin d'obtenir les commentaires des utilisateurs en temps réel, un système de questionnaire en ligne en temps réel devient un outil nécessaire. Cet article expliquera comment utiliser JavaScript et WebSocket pour implémenter un système simple de questionnaire en ligne en temps réel et donnera des exemples de code spécifiques.

1. Sélection de la technologie
Lors de la mise en œuvre du système de questionnaire en ligne en temps réel, nous avons choisi d'utiliser JavaScript et WebSocket comme technologies clés pour la mise en œuvre. JavaScript est un langage de script multiplateforme orienté objet qui peut être utilisé pour le développement de scripts côté navigateur. WebSocket est un protocole de communication en duplex intégral sur une seule connexion TCP, qui permet au serveur de transmettre activement des données au client.

2. Architecture du système
L'architecture du système d'enquête par questionnaire en ligne en temps réel est principalement divisée en deux parties : front-end et back-end.

1. Partie front-end
La partie front-end comprend principalement l'interface utilisateur et le code JavaScript. L'interface utilisateur est chargée d'afficher le questionnaire et de recevoir les commentaires des utilisateurs, tandis que le code JavaScript est chargé d'établir une connexion WebSocket avec le backend et de recevoir les résultats du questionnaire en temps réel.

2. Partie backend
La partie backend est principalement chargée de recevoir les réponses aux questionnaires soumis par les utilisateurs et de diffuser les résultats du questionnaire à tous les clients connectés. Le backend peut utiliser n'importe quel serveur prenant en charge WebSocket, tel que Node.js, Java, Python, etc.

3. Étapes d'implémentation
1. Implémentation frontale
Tout d'abord, nous devons introduire la bibliothèque JavaScript liée à WebSocket dans la page HTML, comme indiqué ci-dessous :

<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>

Dans le code ci-dessus, nous avons créé une instance WebSocket en spécifiant. l'adresse et le port du serveur pour établir une connexion. Nous gérons ensuite les interactions avec le serveur en écoutant les événements tels que onopen, onmessage et onclose. onopen、onmessage和onclose等事件来处理与服务器的交互。

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

首先，我们需要安装ws库：

$ npm install ws

然后，在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));
      }
    });
  });
});

在以上代码中，我们先创建了一个WebSocket.Server实例，并监听指定的端口。然后，我们通过监听connection事件来处理客户端的连接请求。在连接建立成功后，我们又监听了message

Ensuite, nous devons implémenter le serveur WebSocket sur le backend pour recevoir les réponses au questionnaire soumises par les utilisateurs et les diffuser à tous les clients connectés. En prenant Node.js comme exemple, nous pouvons utiliser la bibliothèque ws pour créer rapidement un serveur WebSocket.

rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!