js websocket 例子(一)
JS WebSocket 示例
WebSocket 是一种在 Web 浏览器和 Web 服务器之间建立持久性的全双工通信通道的协议。它可以使客户端和服务器之间实时地交换数据。JavaScript 使用 WebSocket API 来实现与 WebSocket 服务器进行通信。在本文中,我们将介绍一些常见的 JavaScript WebSocket 示例。
1.连接到 WebSocket 服务器
使用 WebSocket API 连接到 WebSocket 服务器非常简单。以下是一个基本的连接示例:
const socket = new WebSocket("
// 连接成功时触发
= function(event) {
  ("已连接到服务器");
};
// 接收到来自服务器的消息时触发
= function(event) {
  ("收到消息:" + );
};
// 连接关闭时触发
= function(event) {
  ("连接已关闭");
};
// 发送消息到服务器
("Hello Server"前端websocket怎么用);
在此示例中,我们创建了一个 WebSocket 对象,并通过 new WebSocket() 构造函数传入了 WebSocket 服务器的 URL。然后,我们定义了 和 `函数来处理相应的事件。最后,我们通过()` 方法向服务器发送消息。
2.向多个客户端广播消息
通过 WebSocket API,我们可以将消息广播给连接的所有客户端。以下是一个示例,其中服务器接收到消息后将其广播给所有连接的客户端:
const WebSocket = require("ws");
const wss = new ({ port: 8080 });
("connection", function(ws) {
  ("message", function(message) {
    // 广播消息给所有客户端
    (function(client) {
      if ( === ) {
        (message);
      }
    });
  });
});
在此示例中,我们使用 ws 模块创建了一个 WebSocket 服务器。当客户端连接到服务器时,connection 事件将被触发,并创建一个 WebSocket 对象。当服务器收到来自客户端的消息时,message 事件将被触发,并遍历所有连接的客户端将消息发送给它们。
3.使用 WebSocket 实现聊天应用
通过 WebSocket,我们可以轻松地实现实时的聊天应用。以下是一个简单的聊天应用程序示例:
// 客户端
const socket = new WebSocket("
= function(event) {
  // 连接成功后发送登录消息
  ("User has connected");
};
= function(event) {
  // 收到新消息时显示在聊天界面
  const message = ;
  displayMessage(message);
};
("#chat-form").addEventListener("submit", function(event) {
  // 当用户提交聊天消息时发送给服务器
  ();
  const textInput = ("#chat-input");
  const message = ;
  (message);
  = "";
});
// 服务器
const WebSocket = require("ws");
const wss = new ({ port: 8080 });
("connection", function(ws) {
  ("message", function(message) {
    // 广播消息给所有客户端
    (function(client) {
      if ( === ) {
        (message);
      }
    });
  });
});
在此示例中,我们首先创建一个用于聊天界面的 HTML 元素,并添加了相应的事件。当用户提交聊天消息时,我们通过 () 方法将其发送到服务器。服务器接收到消息后,会将它广播给所有连接的客户端。
结论
WebSocket 提供了一种在浏览器和服务器之间进行实时双向通信的方法。使用 JavaScript WebSocket API,我们可以轻松地建立与 WebSocket 服务器的连接,并进行数据交换。通过使用 WebSocket,我们可以实现各种各样的应用程序,如实时聊天、实时更新、多人游戏等等。以上只是一些常见的 JavaScript WebSocket 示例,你可以根据自己的需求进一步探索 WebSocket 的强大功能。