卷妹的JavaWeb成长之旅：第七日，攻克WebSocket

2023-12-04 19:55:48

卷妹的成长日记之JavaWeb Day7

WebSocket简介

WebSocket是一种基于TCP的全双工通信协议，它允许客户端和服务器之间进行双向通信。这使得WebSocket成为构建实时应用的理想选择，例如聊天室、游戏和金融交易平台。

WebSocket与HTTP长轮询和Comet等其他实时通信技术相比具有许多优势。首先，WebSocket是双向的，这意味着客户端和服务器可以同时发送和接收消息。其次，WebSocket是全双工的，这意味着客户端和服务器可以同时发送和接收消息，无需等待对方。第三，WebSocket是一种轻量级协议，它不会增加服务器或客户端的负担。

WebSocket入门

为了使用WebSocket，我们需要在服务器端和客户端端都进行一些设置。在服务器端，我们需要使用一个WebSocket库来处理WebSocket连接。在客户端，我们需要使用JavaScript WebSocket API来建立WebSocket连接。

构建一个简单的聊天室

现在，让我们使用WebSocket来构建一个简单的聊天室。在服务器端，我们可以使用Spring Boot来搭建一个简单的WebSocket服务器。在客户端，我们可以使用HTML、CSS和JavaScript来构建一个简单的聊天室界面。

WebSocket的基本概念和应用

在学习了如何使用WebSocket构建一个简单的聊天室之后，我们还可以学习一些WebSocket的基本概念和应用。这些概念和应用包括：

WebSocket帧： WebSocket帧是WebSocket连接中传递的数据单位。WebSocket帧可以包含文本、二进制数据或两者兼有。
WebSocket握手： WebSocket握手是客户端和服务器在建立WebSocket连接之前进行的一系列消息交换。WebSocket握手用于协商WebSocket连接的参数，例如子协议和扩展。
WebSocket子协议： WebSocket子协议是客户端和服务器之间协商的、用于WebSocket连接的通信协议。WebSocket子协议可以定义消息格式、压缩算法和加密算法等。
WebSocket扩展： WebSocket扩展是客户端和服务器之间协商的、用于WebSocket连接的附加功能。WebSocket扩展可以用于支持不同的消息格式、压缩算法和加密算法等。

结束语

在JavaWeb系列的第七天，我们学习了WebSocket的基本概念和应用，并使用WebSocket构建了一个简单的聊天室。我希望这篇文章能够帮助你更好地理解WebSocket，并能够使用WebSocket来构建自己的实时应用。

代码示例

// 服务器端代码

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@SpringBootApplication
@EnableWebSocket
public class WebSocketServerApplication implements WebSocketConfigurer {

    public static void main(String[] args) {
        SpringApplication.run(WebSocketServerApplication.class, args);
    }

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/websocket").setAllowedOrigins("*");
    }
}

// 客户端端代码

<!DOCTYPE html>
<html>
<head>
    
    <script src="WebSocket.js"></script>
    <script>
        var websocket = new WebSocket("ws://localhost:8080/websocket");

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

        websocket.onmessage = function (event) {
            console.log("收到消息：" + event.data);
        };

        websocket.onclose = function () {
            console.log("WebSocket连接已关闭");
        };

        websocket.onerror = function (event) {
            console.log("WebSocket连接出错：" + event.data);
        };

        function sendMessage() {
            var message = document.getElementById("message").value;
            websocket.send(message);
        }
    </script>
</head>
<body>
    <h1>WebSocket聊天室</h1>
    <input type="text" id="message" placeholder="输入消息">
    <button type="button" onclick="sendMessage()">发送</button>
</body>
</html>