js websocket 例子(一)

2024年2月4日发(作者：)

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 对象，并通过 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 的强大功能。