WebSocket

Posted 2023-03-17

参考技术A TCP/IP（Transmission Control Protocol/Internet Protocol，传输控制协议/网际协议）是指能够在多个不同网络间实现信息传输的协议簇。TCP/IP协议不仅仅指的是TCP和IP两个协议，而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇， 只是因为在TCP/IP协议中TCP协议和IP协议最具代表性，所以被称为TCP/IP协议。

TCP/IP协议在一定程度上参考了OSI的体系结构。OSI模型共有七层，从下到上分别是物理层、数据链路层、网络层、运输层、会话层、表示层和应用层。但是这显然是有些复杂的，所以在TCP/IP协议中，它们被简化为了四个层次。

WebSocket是一种在单个TCP连接上进行全双工通信的协议。使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

该bean将使用底层的WebSocket容器注册任何被 @ServerEndpoint 注解的beans

说到这里，websocket的优点已经很明显了。比如全双工模式、双通道交互、传输数据简约，交互速度快......

但是，凡事有利有弊，正是因为它的这些优点，导致websocket也存在一定的缺点，websocket是通过http一次握手升级后，建立的持久性连接。所以特别依赖网络环境，一次连接中可能因为一些网络原因导致连接中断。所以，使用websocket的时候需要处理好断开重连机制，最大化的保证websocket的连接时长。

websocket还会存在并发问题，原生websocket在浏览器中是存在最大连接数限制的，举个例子：IE（6个）、Chrome（256个）、Firefox（200个）、 Safari （1273个）。

websocket

参考技术A 建立连接（创建WebSocket对象）：

var Socket =new WebSocket(url, [protocol] );// url：服务器端地址；protocol：可选，指定可接受的子协议。

WebSocket对象提供了两个属性、四个事件、两个方法，分别是：

1.WebSocket.readyState属性：表示连接状态

    0——（连接尚未建立）；1——（连接已建立）；2——（连接正在关闭）；3——（连接已经关闭或连接不能打开）

2.WebSocket.bufferedAmount属性：被send()放入传输队列，还未发出的UTF-8文本字节数

    ws.addEventListener('open',function(event)

            ws.send('Hello Server!');

    );

     ws.onopen =function()

        ws.send('Hello Server!');

    

3.open：WebSocket.onopen()：连接建立时触发的事件

4.message：WebSocket.onmessage()： 客户端接收服务器端发送的信息时触发

5.error：WebSocket.onerror()：通信发生错误时触发

6.close：WebSocket.onclose()：连接关闭时触发

7.WebSocket.send()：发送信息的方法

8.WebSocket.close()：关闭连接方法

SOCKJS

SOCKJS 是一个浏览器使用的js库，它提供了一个类似网络的对象，和连贯的，跨浏览器的jaApi，可以在浏览器和服务器之间创建一个低延迟，全双工的跨域通信通道

SOCKJS实现了对浏览器的兼容，spring框架提供了很多透明的，回退选项，如果遇到低版本的浏览器会自动降级为轮询，支持就用websocket

sockjs-client

sockjs-client 是从SOCKJS分离出来的客户端使用的通信模块

stompjs

STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议;

websocket只是一个消息架构，不强制使用任何的消息协议，为了更好的在浏览器和服务器之间传递消息，使用stomp协议 的stompjs

STOMP与WebSocket 的关系:就是没使用http而使用stomp协议，在浏览器和服务器之间进行消息传递

1.HTTP协议解决了web浏览器发起请求以及web服务器响应请求的细节,假设HTTP协议不存在,只能使用TCP套接字来编写web应用,你可能认为这是一件疯狂的事情;

2.直接使用WebSocket(SockJS)就很类似于使用TCP套接字来编写web应用,因为没有高层协议,就需要我们定义应用间发送消息的语义,还需要确保连接的两端都能遵循这些语义;

3同HTTP在TCP套接字上添加请求-响应模型层一样,STOMP在WebSocket之上提供了一个基于帧的线路格式层,用来定义消息语义、

安装

npm install sockjs-client --save

npm install stompjs --save

引入

import SockJS from 'sockjs-client';

import  Stomp from 'stompjs';

export default

    data()

        return

            stompClient:'',

            timer:'',

       

    ,

    methods:

        initWebSocket()

            this.connection();

            let that= this;

            // 断开重连机制,尝试发送消息,捕获异常发生时重连

            this.timer = setInterval(() =>

                try

                    that.stompClient.send("test");

                catch (err)

                    console.log("断线了: " + err);

                    that.connection();

               

            , 5000);

        , 

        connection()

            // 建立连接对象

            let socket = new SockJS('execution-progress/info?t=1593744273983');

            var sockjs =new SockJS(url, _reserved, options);

                //server(string)：添加到url的字符串，默认为随机的4位数

                //transports (string OR array of strings)：回退传输列表

                // sessionId (number OR function)：会话标识，函数必须返回一个随机生成的字符串

            // 获取STOMP子协议的客户端对象

            this.stompClient = Stomp.over(socket);

            // 定义客户端的认证信息,按需求配置

            let headers =

                Authorization:''

           

            // 向服务器发起websocket连接

            this.stompClient.connect(headers,() =>

                this.stompClient.subscribe('/topic/public', (msg) => // 订阅服务端提供的某个topic

                    console.log('广播成功')

                    console.log(msg);  // msg.body存放的是服务端发送给我们的信息

                ,headers);

                this.stompClient.send("/app/chat.addUser",

                    headers,

                    JSON.stringify(sender: '',chatType: 'JOIN'),

                )  //用户加入接口

            , (err) =>

                // 连接发生错误时的处理函数

                console.log('失败')

                console.log(err);

            );

        ,    //连接 后台

        disconnect()

            if (this.stompClient)

                this.stompClient.disconnect();

           

        ,  // 断开连接

    ,

    mounted()

        this.initWebSocket();

    ,

    beforeDestroy: function ()

        // 页面离开时断开连接,清除定时器

        this.disconnect();

        clearInterval(this.timer);