Websocket示例代码JS - JavaScript

WebSockets是一种用于在Web浏览器和服务器之间进行实时双向通信的技术。这种通信协议相对于HTTP良好地解决了实时的需求。 在本文中，我们将学习如何使用JavaScript中的WebSocket进行实时通信，并提供WebSocket的示例代码。

前置条件

在使用JavaScript的WebSocket进行编程之前，您需要确保您的Web浏览器支持WebSockets和已经建立了WebSocket服务器。

创建WebSocket

要建立WebSocket连接，可以使用以下代码：

var socket = new WebSocket("ws://localhost:8080");

在这个代码示例中，我们创建了一个新的WebSocket实例，该实例连接到“ws://localhost:8080”。

WebSocket事件

WebSocket对象支持四个事件：onopen，onmessage，onerror和onclose。通过这些事件，您可以更好地控制WebSockets的行为。下面是使用WebSocket事件的示例代码：

var socket = new WebSocket("ws://localhost:8080");

socket.onopen = function() {
  console.log("WebSocket Connected");
};

socket.onmessage = function(event) {
  console.log(event.data);
};

socket.onerror = function(error) {
  console.log("WebSocket Error: " + error);
};

socket.onclose = function(event) {
  console.log("WebSocket Closed: " + event.code + " " + event.reason);
};

在这个代码示例中，我们定义了四个事件：onopen，onmessage，onerror和onclose。

当WebSocket连接成功地建立时，onopen事件被触发。在这个事件中，我们输出了一个消息到控制台。

当服务器通过WebSocket发送消息时，onmessage事件被触发。 我们在这个事件中输出了消息内容。

当WebSocket遇到错误时，onerror事件被触发。 我们在这个事件中输出了错误消息。

当WebSocket连接关闭时，onclose事件被触发。 我们在这个事件中输出了连接关闭消息，包括关闭代码和关闭原因。

发送消息

要发送消息，可以使用以下代码：

var socket = new WebSocket("ws://localhost:8080");

socket.onopen = function() {
  socket.send("Hello WebSocket!");
};

在这个代码示例中，我们编写了一个send请求，它将发送一个“Hello WebSocket！”消息。

完整的WebSocket示例代码

var socket = new WebSocket("ws://localhost:8080");

socket.onopen = function() {
  console.log("WebSocket Connected");
  socket.send("Hello WebSocket!");
};

socket.onmessage = function(event) {
  console.log(event.data);
};

socket.onerror = function(error) {
  console.log("WebSocket Error: " + error);
};

socket.onclose = function(event) {
  console.log("WebSocket Closed: " + event.code + " " + event.reason);
};

在这个完整的示例代码中，我们创建了一个WebSocket连接，并在onopen事件中发送了“Hello WebSocket！”消息，然后我们定义了其他三个事件。