WebSocket解释及使用

最新推荐文章于 2024-05-21 15:40:10 发布

笑释一切

最新推荐文章于 2024-05-21 15:40:10 发布

阅读量853

点赞数

本文链接：https://blog.csdn.net/xiaoshiyiqie/article/details/81873821

版权

一、概述

1、简介

WebSocket 是一种网络通信协议。是HTML5出的协议，也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）

2、与HTTP的区别和联系

1）HTTP 协议中通信只能由客户端发起。HTTP 协议做不到服务器主动向客户端推送信息。
2）Websocket协议Request的HTTP头文件中存在：

Upgrade: 表示要升级到websocket协议。
Connection: 表示要升级协议
Sec-WebSocket-Key: 与后面服务端响应首部的Sec-WebSocket-Accept是配套的，提供基本的防护，比如恶意的连接，或者无意的连接。
Sec-WebSocket-Protocol: 是一个用户定义的字符串，用来区分同URL下，不同的服务所需要的协议。
Sec-WebSocket-Version: 表示websocket的版本。如果服务端不支持该版本，需要返回一个Sec-WebSocket-Versionheader，里面包含服务端支持的版本号。

Websocket协议Response的HTTP头文件中存在：

Sec-WebSocket-Accept: 根据客户端请求首部的Sec-WebSocket-Key计算出来
1.将Sec-WebSocket-Key跟258EAFA5-E914-47DA-95CA-C5AB0DC85B11拼接。
2.通过SHA1计算出摘要，并转成base64字符串。
Sec-WebSocket-Protocol: 是一个用户定义的字符串，用来区分同URL下，不同的服务所需要的协议。

二、特点和作用

特点：

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

最大特点为：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

三、机制

1、ajax轮询

ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。

场景再现：
客户端：啦啦啦，有没有新信息(Request)
服务端：没有（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：没有。。（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：你好烦啊，没有啊。。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：好啦好啦，有啦给你。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：。。。。。没。。。。没。。。没有（Response） —- loop

2、long poll

long poll 其实原理跟 ajax轮询差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。

场景再现：
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request）
服务端：额。。 等待到有消息的时候。。来 给你（Response）
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request） -loop
从上面可以看出其实这两种方式，都是在不断地建立HTTP连接，然后等待服务端处理，可以体现HTTP协议的另外一个特点，被动性。
#何为被动性呢，其实就是，服务端不能主动联系客户端，只能有客户端发起。
#简单地说就是，服务器是一个很懒的冰箱（这是个梗）（不会、不能主动发起连接），但是上司有命令，#如果有客户来，不管多么累都要好好接待。
#说完这个，我们再来说一说上面的缺陷（原谅我废话这么多吧OAQ）

从上面很容易看出来，不管怎么样，上面这两种都是非常消耗资源的。

ajax轮询需要服务器有很快的处理速度和资源。（速度）long poll 需要有很高的并发，也就是说同时接待客户的能力。（场地大小）

所以 ajax轮询和 long poll 都有可能发生这种情况。

客户端：啦啦啦啦，有新信息么？
服务端：月线正忙，请稍后再试（503 Server Unavailable）
客户端：。。。。好吧，啦啦啦，有新信息么？
服务端：月线正忙，请稍后再试（503 Server Unavailable）
客户端：然后服务端在一旁忙的要死：冰箱，我要更多的冰箱！更多。。更多。。（我错了。。这又是梗。。）

四、使用（与SpringBoot结合）

1、POM

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2、Config

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        // 用于创建一个endpoint节点，使用SockJS的接入
        // 可以创建多个
        stompEndpointRegistry.addEndpoint("/webSocket").withSockJS();
    }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 用于订阅的地址起始路径
        // 订阅Broker名称,topic用来广播，user用来实现p2p
        registry.enableSimpleBroker("/topic", "/socketSend");
        // 用于客户端发送数据给服务端后，服务端返回信息给客户端的起始路径
        registry.setApplicationDestinationPrefixes("/send");
    }
}

3、请求实体类

public class ClientRequest {

    private String message;

    public ClientRequest() {
    }

    public ClientRequest(String message) {
        this.message = message;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

4、响应实体类

public class ServerResponse {

    private String respMessage;

    public ServerResponse() {
    }

    public ServerResponse(String respMessage) {
        this.respMessage = respMessage;
    }

    public String getRespMessage() {
        return respMessage;
    }

    public void setRespMessage(String respMessage) {
        this.respMessage = respMessage;
    }
}

5、请求控制类

@Controller
public class ClientRequestController {

    @MessageMapping("/connect")
    @SendTo("/socketSend/info")
    public ServerResponse connect(ClientRequest clientRequest){
        System.out.println(clientRequest.getMessage());
        return new ServerResponse("welcome " + clientRequest.getMessage());
    }
}

6、前端

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>广播式WebSocket</title>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/stomp.js}"></script>
    <script type="text/javascript" th:src="@{/js/sockjs.min.js}"></script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #e80b0a;">Sorry，浏览器不支持WebSocket</h2></noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">连接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    </div>

    <div id="conversationDiv">
        <label>输入你的名字</label><input type="text" id="name"/>
        <button id="sendName" onclick="sendName();">发送</button>
        <p id="response"></p>
    </div>
</div>
<script type="text/javascript">
    var stompClient = null;
    function setConnected(connected) {
        document.getElementById("connect").disabled = connected;
        document.getElementById("disconnect").disabled = !connected;
        document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';
//        $("#connect").disabled = connected;
//        $("#disconnect").disabled = !connected;
        $("#response").html();
    }
    function connect() {
        var socket = new SockJS('/webSocket');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            setConnected(true);
            console.log('Connected:' + frame);
            stompClient.subscribe('/socketSend/info', function (response) {
                showResponse(JSON.parse(response.body).respMessage);
            })
        });
    }
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log('Disconnected');
    }
    function sendName() {
        var name = $('#name').val();
        console.log('message:' + name);
        stompClient.send("/send/connect", {}, JSON.stringify({'message': name}));
    }
    function showResponse(message) {
        $("#response").html(message);
    }
</script>
</body>
</html>

笑释一切

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebSocket解释及使用

一、概述1、简介WebSocket 是一种网络通信协议。是HTML5出的协议，也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）2、与HTTP的区别和联系1）HTTP 协议中通信只能由客户端发起。HTTP 协议做不到服务器主动向客户端推送信息。 2）Websocket协议Request的HTTP头文件中存在：Upgrade:...
复制链接

扫一扫