求一个html 接收来自websocket的消息的简单的例子。

seven7c · 发表于 2023-8-20 23:45:03

求一个html 接收来自websocket发送的消息的简单的例子。
例如 websocket 发送一段json文本，然后显示在 html 页面上。

人杰啊 · 发表于 2023-8-20 23:45:04

以下是一个简单的示例，展示如何使用WebSocket接收来自服务器发送的消息，并将其显示在HTML页面上：

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Example</title>
</head>
<body>
  <div id="messageContainer"></div>

  <script>
    const messageContainer = document.getElementById('messageContainer');
    const socket = new WebSocket('ws://localhost:3000'); // 替换为实际的WebSocket服务器地址

    socket.onopen = () => {
      console.log('WebSocket connection established.');
    };

    socket.onmessage = event => {
      const message = JSON.parse(event.data);
      const messageElement = document.createElement('p');
      messageElement.textContent = message.text;
      messageContainer.appendChild(messageElement);
    };

    socket.onclose = () => {
      console.log('WebSocket connection closed.');
    };
  </script>
</body>
</html>

在上面的示例中，我们创建了一个WebSocket对象，并将其连接到指定的服务器地址（ws://localhost:3000）。你需要将该地址替换为实际的WebSocket服务器地址。

然后，我们定义了几个WebSocket事件处理程序：

onopen：当WebSocket连接建立时触发。在这个示例中，我们简单地打印一条消息到控制台。
onmessage：当接收到来自服务器的消息时触发。我们将接收到的消息解析为JSON格式，并创建一个<p>元素来显示消息的文本内容。然后，我们将该元素添加到messageContainer容器中，以便在页面上显示出来。
onclose：当WebSocket连接关闭时触发。在这个示例中，我们简单地打印一条消息到控制台。

在HTML页面中，我们使用一个<div>元素（id为messageContainer）作为消息的容器。通过JavaScript代码，我们获取该容器的引用，并在接收到消息时动态创建<p>元素来显示消息。

请注意，这只是一个简单的示例，仅用于演示WebSocket消息的接收和显示。你需要根据实际的应用场景进行适当的修改和扩展。另外，你还需要在服务器端实现WebSocket服务器，并向客户Duan发送消息。

人杰啊 · 发表于 2023-8-21 00:15:24

以下是一个简单的示例，展示如何使用WebSocket接收来自服务器发送的消息，并将其显示在HTML页面上：

```html
<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Example</title>
</head>
<body>
  <div id="messageContainer"></div>

  <script>
const messageContainer = document.getElementById('messageContainer');
const socket = new WebSocket('ws://localhost:3000'); // 替换为实际的WebSocket服务器地址

socket.onopen = () => {
   console.log('WebSocket connection established.');
};

socket.onmessage = event => {
   const message = JSON.parse(event.data);
   const messageElement = document.createElement('p');
   messageElement.textContent = message.text;
   messageContainer.appendChild(messageElement);
};

socket.onclose = () => {
   console.log('WebSocket connection closed.');
};
  </script>
</body>
</html>
```

在上面的示例中，我们创建了一个WebSocket对象，并将其连接到指定的服务器地址（`ws://localhost:3000`）。你需要将该地址替换为实际的WebSocket服务器地址。

然后，我们定义了几个WebSocket事件处理程序：

- `onopen`：当WebSocket连接建立时触发。在这个示例中，我们简单地打印一条消息到控制台。
- `onmessage`：当接收到来自服务器的消息时触发。我们将接收到的消息解析为JSON格式，并创建一个`<p>`元素来显示消息的文本内容。然后，我们将该元素添加到`messageContainer`容器中，以便在页面上显示出来。
- `onclose`：当WebSocket连接关闭时触发。在这个示例中，我们简单地打印一条消息到控制台。

在HTML页面中，我们使用一个`<div>`元素（id为`messageContainer`）作为消息的容器。通过JavaScript代码，我们获取该容器的引用，并在接收到消息时动态创建`<p>`元素来显示消息。

请注意，这只是一个简单的示例，仅用于演示WebSocket消息的接收和显示。你需要根据实际的应用场景进行适当的修改和扩展。另外，你还需要在服务器端实现WebSocket服务器，并向客户Duan发送消息。

seven7c · 发表于 2023-8-21 08:00:11

这么简单的问题，问下chatGPT就完事了

		自动登录	找回密码
密码			注册

[已解决] 求一个html 接收来自websocket的消息的简单的例子。

最佳答案

评分

精易论坛 - 有你更精彩 /2