WebSockets-JavaScript应用程序(1)

📌 相关文章

📜 WebSockets-JavaScript应用程序(1)

📅 最后修改于: 2023-12-03 15:05:55.553000 🧑 作者: Mango

WebSockets-JavaScript应用程序介绍

WebSockets是一种浏览器与服务器进行双向通信的技术。这意味着浏览器可以向服务器发送请求并接收响应，并且服务器也可以向浏览器发送请求并接收响应。WebSockets使用流式数据传输，它们的开销很小，因此可以在实时应用程序中使用。

WebSockets-JavaScript应用程序可以在客户端和服务器之间实现实时双向通信的功能。这种技术已经广泛应用于包括在线游戏、在线聊天、在线拍卖等实时应用程序中。

WebSocket API

客户端和服务器之间的WebSocket连接通过browser WebSocket API进行管理。这个API定义了浏览器中WebSocket对象的行为。下面是WebSocket API的几个核心方法：

new WebSocket(url, [protocols])

创建一个新的WebSocket对象并建立到服务器的连接。

参数：

url: WebSocket连接的URL地址
protocols: 协议列表

示例：

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

WebSocket.send(data)

将数据发送到服务器。

参数：

data: 要发送的数据

示例：

ws.send('Hello Server!');

WebSocket.onopen

当WebSocket连接打开时触发的事件，可以在此事件中发送数据到服务器。

参数：

event: WebSocket连接打开时的event对象

示例：

ws.onopen = function(event) {
  console.log('WebSocket连接已打开!');
  ws.send('Hello Server!');
}

WebSocket.onmessage

当从服务器接收到消息时触发的事件。

参数：

event: 从服务器接收到的event对象

示例：

ws.onmessage = function(event) {
  console.log('从服务器接收到了消息: ' + event.data);
}

WebSocket.onclose

当WebSocket连接关闭时触发的事件。

参数：

event: WebSocket连接关闭时的event对象

示例：

ws.onclose = function(event) {
  console.log('WebSocket连接已关闭：' + event.code + ' - ' + event.reason);
}

编写JavaScript应用程序

下面是一个使用WebSocket API的JavaScript应用程序示例4。此应用程序将通过WebSockets在客户端和服务器之间实现实时聊天的功能。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>WebSocket Chat</title>
        <!-- 引入jQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <h1>WebSocket Chat</h1>
        <div id="chat-box"></div>
        <input id="message-input" type="text">
        <button id="send-button">Send</button>

        <script src="chat.js"></script>
    </body>
</html>

JavaScript

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

ws.onopen = function(event) {
    console.log("WebSocket连接已打开!");
};

ws.onmessage = function(event) {
    var message = event.data;
    var chatBox = document.querySelector("#chat-box");
    chatBox.innerHTML += "<div>" + message + "</div>";
};

ws.onclose = function(event) {
    console.log('WebSocket连接已关闭：' + event.code + ' - ' + event.reason);
};

document.querySelector("#send-button").onclick = function(event) {
    var messageInput = document.querySelector("#message-input");
    var message = messageInput.value;
    ws.send(message);
    messageInput.value = "";
};

Server

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
    console.log("WebSocket连接已建立！");

    ws.on('message', function incoming(message) {
        console.log('从客户端接收到了消息: %s', message);
        var response = message;
        wss.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN) {
                var message = response;
                client.send(message);
            }
        });
    });

    ws.on('close', function close() {
        console.log('WebSocket连接已关闭！');
    });
});

总结

WebSockets-JavaScript应用程序可以在客户端和服务器之间实现实时双向通信的功能。通过WebSocket API，可以轻松地在JavaScript应用程序中使用WebSockets。