WebSocket整合

最新推荐文章于 2024-09-09 21:00:00 发布
最新推荐文章于 2024-09-09 21:00:00 发布
阅读量671 收藏 2
点赞数
分类专栏： Java架构 文章标签： websocket 服务器 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yc_Cabbage/article/details/126338704
版权

一 简介
初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？
答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

1.1 传统的消息通讯方式

ajax轮询

ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。
场景再现：
客户端：啦啦啦，有没有新信息(Request)
服务端：没有（Response）

long poll

long poll 其实原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。
场景再现：
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request）
服务端：额。。 等待到有消息的时候。。来 给你（Response）

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

长连接

在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。
优点：消息即时到达，不发无用请求；管理起来也相对方便。
缺点：服务器维护一个长连接会增加开销，当客户端越来越多的时候，server压力大！
实例：Gmail聊天

(1).基于http协议的长连接

在HTTP1.0和HTTP1.1协议中都有对长连接的支持。其中HTTP1.0需要在request中增加”Connection： keep-alive“ header才能够支持，而HTTP1.1默认支持.
http1.0请求与服务端的交互过程:
a)客户端发出带有包含一个header：”Connection： keep-alive“的请求
b)服务端接收到这个请求后,根据http1.0和”Connection： keep-alive“判断出这是一个长连接,就会在response的header中也增加”Connection： keep-alive“,同是不会关闭已建立的tcp连接.
c)客户端收到服务端的response后,发现其中包含”Connection： keep-alive“，就认为是一个长连接，不关闭这个连接。并用该连接再发送request.转到a)

(2).http1.1请求与服务端的交互过程:

a)客户端发出http1.1的请求
b)服务端收到http1.1后就认为这是一个长连接,会在返回的response设置Connection： keep-alive,同是不会关闭已建立的连接.
c)客户端收到服务端的response后,发现其中包含”Connection： keep-alive“，就认为是一个长连接，不关闭这个连接。并用该连接再发送request.转到a)
基于http协议的长连接减少了请求,减少了建立连接的时间,但是每次交互都是由客户端发起的,客户端发送消息,服务端才能返回客户端消息.因为客户端也不知道服务端什么时候会把结果准备好,所以客户端的很多请求是多余的,仅是维持一个心跳,浪费了带宽.

1.2 websocket的方式实现服务端消息推送

1.什么是socket？什么是websocket？两者有什么区别？websocket是仅仅将socket的概念移植到浏览器中的实现吗？

我们知道，在网络中的两个应用程序（进程）需要全双工相互通信（全双工即双方可同时向对方发送消息），需要用到的就是socket，它能够提供端对端通信，对于程序员来讲，他只需要在某个应用程序的一端（暂且称之为客户端）创建一个socket实例并且提供它所要连接一端（暂且称之为服务端）的IP地址和端口，而另外一端（服务端）创建另一个socket并绑定本地端口进行监听，然后客户端进行连接服务端，服务端接受连接之后双方建立了一个端对端的TCP连接，在该连接上就可以双向通讯了，而且一旦建立这个连接之后，通信双方就没有客户端服务端之分了，提供的就是端对端通信了。我们可以采取这种方式构建一个桌面版的im程序，让不同主机上的用户发送消息。从本质上来说，socket并不是一个新的协议，它只是为了便于程序员进行网络编程而对tcp/ip协议族通信机制的一种封装。

socket传送门：http://blog.csdn.net/luokehua789789/article/details/54378264

websocket是html5规范中的一个部分，它借鉴了socket这种思想，为web应用程序客户端和服务端之间（注意是客户端服务端）提供了一种全双工通信机制。同时，它又是一种新的应用层协议，websocket协议是为了提供web应用程序和服务端全双工通信而专门制定的一种应用层协议，通常它表示为：ws://echo.websocket.org/?encoding=text HTTP/1.1，可以看到除了前面的协议名和http不同之外，它的表示地址就是传统的url地址。ws wss http https

Websocket其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充可以通过这样一张图理解

websocket具有以下几个方面的优势：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

1.2.1.websocket的通信原理和机制

既然是基于浏览器端的web技术，那么它的通信肯定少不了http,websocket本身虽然也是一种新的应用层协议，但是它也不能够脱离http而单独存在。具体来讲，我们在客户端构建一个websocket实例，并且为它绑定一个需要连接到的服务器地址，当客户端连接服务端的时候，会向服务端发送一个类似下面的http报文

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

Upgrade: websocket
Connection: Upgrade

这个就是Websocket的核心了，告诉Apache、Nginx等服务器：发起的是websocket协议。

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

首先，Sec-WebSocket-Key 是一个Base64 encode的值，这个是浏览器随机生成的，告诉服务器：泥煤，不要忽悠窝，我要验证尼是不是真的是Websocket助理。
然后，Sec_WebSocket-Protocol 是一个用户定义的字符串，用来区分同URL下，不同的服务所需要的协议。简单理解：今晚我要服务A，别搞错啦~
最后，Sec-WebSocket-Version 是告诉服务器所使用的Websocket Draft（协议版本），在最初的时候，Websocket协议还在 Draft 阶段，各种奇奇怪怪的协议都有，而且还有很多期奇奇怪怪不同的东西，什么Firefox和Chrome用的不是一个版本之类的，当初Websocket协议太多可是一个大难题。。不过现在还好，已经定下来啦大家都使用的一个东西 脱水：服务员，我要的是13岁的噢→_→

然后服务器会返回下列东西，表示已经接受到请求， 成功建立Websocket啦！

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

依然是固定的，告诉客户端即将升级的是Websocket协议，而不是mozillasocket，lurnarsocket或者shitsocket。
然后，Sec-WebSocket-Accept 这个则是经过服务器确认，并且加密过后的 Sec-WebSocket-Key。服务器：好啦好啦，知道啦，给你看我的ID CARD来证明行了吧。。
后面的，Sec-WebSocket-Protocol 则是表示最终使用的协议。
返回的状态码为101，表示同意客户端协议转换请求，并将它转换为websocket协议。以上过程都是利用http通信完成的，称之为websocket协议握手(websocket Protocol handshake)，进过这握手之后，客户端和服务端就建立了websocket连接，以后的通信走的都是websocket协议了。所以总结为websocket握手需要借助于http协议，建立连接后通信过程使用websocket协议。同时需要了解的是，该websocket连接还是基于我们刚才发起http连接的那个TCP连接。一旦建立连接之后，我们就可以进行数据传输了，websocket提供两种数据传输：文本数据和二进制数据。

至此，HTTP已经完成它所有工作了，接下来就是完全按照Websocket协议进行了。

基于以上分析，我们可以看到，websocket能够提供低延迟，高性能的客户端与服务端的双向数据通信。它颠覆了之前web开发的请求处理响应模式，并且提供了一种真正意义上的客户端请求，服务器推送数据的模式，特别适合实时数据交互应用开发。

对比前面的http的客户端服务器的交互图可以发现WebSocket方式减少了很多TCP打开和关闭连接的操作，WebSocket的资源利用率高。

二、websocket创建

websocket的创建和常用的属性方法

以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocol] );
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

属性描述
Socket.readyState只读属性 readyState 表示连接状态，可以是以下值：
- 0 - 表示连接尚未建立。
- 1 - 表示连接已建立，可以进行通信。
- 2 - 表示连接正在进行关闭。
- 3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

可以看到，当onopen触发时，对应的额就是readyState的OPEN状态，不包含OPENING；onclose触发时，对应的就是CLOSED状态，不包含CLOSING状态。

WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

事件事件处理程序描述
openSocket.onopen连接建立时触发
messageSocket.onmessage客户端接收服务端数据时触发
errorSocket.onerror通信发生错误时触发
closeSocket.onclose连接关闭时触发

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：

方法描述
Socket.send()使用连接发送数据
Socket.close()关闭连接

三 springboot整合 rabbitmq和websocket
3.1 导入依赖

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

        <!--rabbit MQ-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-amqp</artifactId>
        </dependency>

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

        <!--小辣椒lombok依赖-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- json的依赖-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.75</version>
        </dependency>

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

3.2 配置yml文件

spring:
  rabbitmq:
    host: 162.14.64.72
    port: 5672
    username: test
    password: test
    virtual-host: /test
    publisher-returns: true
    template:
      mandatory: true
    publisher-confirms: true

定义常量

package com.qf.config.mq2;

/**
 * @author ：_my
 * @date ：Created in 2021/12/23 10:05
 * @description：定义mq
 * @modified By：`
 * @version: 1.0
 */

public class RabbitConstant {
    //交换机名称
    public final static String EXCHANGE = "exchange_test";
    //队列
    public final static String QUEUE_TRANSACTION = "queue_transaction";
    public final static String QUEUE_CONTRACT = "queue_contract";
    public final static String QUEUE_QUALIFICATION = "queue_qualification";
    //路由key
    public final static String RK_TRANSACTION = "transaction";
    public final static String RK_CONTRACT = "contract";
    public final static String RK_QUALIFICATION = "qualification";
}

3.3 注入rabbitMQ

package com.qf.config.mq2;

import org.springframework.amqp.core.Binding;
import org.springframework.amqp.core.BindingBuilder;
import org.springframework.amqp.core.DirectExchange;
import org.springframework.amqp.core.Queue;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
* @author ：_my
* @date ：Created in 2021/12/23 10:06
* @description：初始化
* @modified By：`
* @version: 1.0
*/
@Configuration
public class RabbitMqConfig {
    
    /**
    * 声明队列
    *
    * @return
    */
    @Bean
    public Queue queueTransaction() {
        // true表示持久化该队列
        return new Queue(RabbitConstant.QUEUE_TRANSACTION, true);
    }
    
    @Bean
    public Queue queueContract() {
        // true表示持久化该队列
        return new Queue(RabbitConstant.QUEUE_CONTRACT, true);
    }
    
    @Bean
    public Queue queueQualification() {
        // true表示持久化该队列
        return new Queue(RabbitConstant.QUEUE_QUALIFICATION, true);
    }
    
    /**
    * 声明交互器
    *
    * @return
    */
    @Bean
    DirectExchange directExchange() {
        return new DirectExchange(RabbitConstant.EXCHANGE);
    }
    
    /**
    * 绑定
    *
    * @return
    */
    @Bean
    public Binding bindingTransaction() {
        return BindingBuilder.bind(queueTransaction()).to(directExchange()).with(RabbitConstant.RK_TRANSACTION);
    }
    
    /**
    * 绑定
    *
    * @return
    */
    @Bean
    public Binding bindingContract() {
        return BindingBuilder.bind(queueContract()).to(directExchange()).with(RabbitConstant.RK_CONTRACT);
    }
    
    /**
    * 绑定
    *
    * @return
    */
    @Bean
    public Binding bindingQualification() {
        return BindingBuilder.bind(queueQualification()).to(directExchange()).with(RabbitConstant.RK_QUALIFICATION);
    }
}

创建发送消息的格式


package com.qf.vo;

import lombok.Data;

import java.io.Serializable;

@Data
public class MessageVo implements Serializable {

    private String receiveUserId;

    private String routingKey;
}

3.4 编写pulisher

package com.qf.config.mq2;

import com.alibaba.fastjson.JSONObject;
import com.qf.vo.MessageVo;
import lombok.extern.slf4j.Slf4j;
import org.springframework.amqp.core.Message;
import org.springframework.amqp.rabbit.connection.CorrelationData;
import org.springframework.amqp.rabbit.core.RabbitTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import javax.annotation.PostConstruct;
import java.util.UUID;

/**
* @author ：_my
* @date ：Created in 2021/12/23 10:08
* @description：生产者
* @modified By：`
* @version: 1.0
*/
@Component
@Slf4j
public class Sender implements RabbitTemplate.ConfirmCallback, RabbitTemplate.ReturnCallback {
    
    @Autowired
    private RabbitTemplate rabbitTemplate;
    
    @PostConstruct
    public void init() {
        rabbitTemplate.setConfirmCallback(this);
        rabbitTemplate.setReturnCallback(this);
    }
    
    //消息发送确认回调方法
    @Override
    public void confirm(CorrelationData correlationData, boolean ack, String cause) {
        log.info("消息发送成功:" + correlationData);
    }
    
    //消息发送失败回调方法
    @Override
    public void returnedMessage(Message message, int replyCode, String replyText, String exchange, String routingKey) {
        log.error("消息发送失败:" + new String(message.getBody()));
    }
    
    /**
    * 发送消息，不需要实现任何接口，供外部调用
    *
    * @param messageVo
    */
    public void send(MessageVo messageVo) {
        CorrelationData correlationId = new CorrelationData(UUID.randomUUID().toString());
        rabbitTemplate.convertAndSend(RabbitConstant.EXCHANGE, messageVo.getRoutingKey(), JSONObject.toJSON(messageVo).toString(), correlationId);
    }
}

3.5 编写消费者

package com.qf.config.mq2;

/**
* @author ：_my
* @date ：Created in 2021/12/23 10:11
* @description：消费者
* @modified By：`
* @version: 1.0
*/
import com.rabbitmq.client.Channel;
import lombok.extern.slf4j.Slf4j;
import org.springframework.amqp.core.AcknowledgeMode;
import org.springframework.amqp.core.Message;
import org.springframework.amqp.core.Queue;
import org.springframework.amqp.rabbit.annotation.EnableRabbit;
import org.springframework.amqp.rabbit.annotation.RabbitListenerConfigurer;
import org.springframework.amqp.rabbit.connection.ConnectionFactory;
import org.springframework.amqp.rabbit.listener.RabbitListenerEndpointRegistrar;
import org.springframework.amqp.rabbit.listener.SimpleMessageListenerContainer;
import org.springframework.amqp.rabbit.listener.api.ChannelAwareMessageListener;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.converter.MappingJackson2MessageConverter;
import org.springframework.messaging.handler.annotation.support.DefaultMessageHandlerMethodFactory;

import java.io.IOException;


@Configuration
@EnableRabbit
@Slf4j
public class ConsumerConfig implements RabbitListenerConfigurer {
    
    @Autowired
    private ConnectionFactory connectionFactory;
    
    @Autowired
    private WebSocketServerEndpoint webSocketServerEndpoint;
    
    @Bean
    public DefaultMessageHandlerMethodFactory handlerMethodFactory() {
        DefaultMessageHandlerMethodFactory factory = new DefaultMessageHandlerMethodFactory();
        factory.setMessageConverter(new MappingJackson2MessageConverter());
        return factory;
    }
    
    @Bean
    public SimpleMessageListenerContainer messageContainer(@Qualifier("queueTransaction") Queue transaction, @Qualifier("queueContract") Queue contract, @Qualifier("queueQualification") Queue qualification) {
        SimpleMessageListenerContainer container = new SimpleMessageListenerContainer(connectionFactory);
        container.setQueues(transaction, contract, qualification);
        container.setMaxConcurrentConsumers(1);
        container.setConcurrentConsumers(1);
        container.setAcknowledgeMode(AcknowledgeMode.MANUAL); //设置确认模式手工确认
        container.setMessageListener(new ChannelAwareMessageListener() {
            @Override
            public void onMessage(Message message, Channel channel) throws Exception {
                byte[] body = message.getBody();
                log.info("receive msg : " + new String(body));
                try {
                    webSocketServerEndpoint.sendMessageToAll(new String(body));
                    channel.basicAck(message.getMessageProperties().getDeliveryTag(), false);//确认消息成功消费
                } catch (IOException e) {
                    log.error("消息推送前台出错：" + e.getMessage() + "/r/n重新发送");
                    channel.basicNack(message.getMessageProperties().getDeliveryTag(), false, true); //重新发送
                }
            }
        });
        return container;
    }
    
    @Override
    public void configureRabbitListeners(RabbitListenerEndpointRegistrar rabbitListenerEndpointRegistrar) {
        rabbitListenerEndpointRegistrar.setMessageHandlerMethodFactory(handlerMethodFactory());
    }
}

3.6 注入websocket

package com.qf.config;

import org.springframework.amqp.rabbit.core.RabbitTemplate;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
@Component
public class WebSocketConfig {
    
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
    
}

3.7 编写websocket 服务器端

package com.qf.config.mq2;

/**
* @author ：_my
* @date ：Created in 2021/12/23 10:13
* @description：websocket
* @modified By：`
* @version: 1.0
*/
import com.alibaba.fastjson.JSONObject;
import com.qf.vo.MessageVo;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
* ServerEndpoint
* <p>
* 使用springboot的唯一区别是要@Component声明下，而使用独立容器是由容器自己管理websocket的，但在springboot中连容器都是spring管理的。
* <p>
* 虽然@Component默认是单例模式的，但springboot还是会为每个websocket连接初始化一个bean，所以可以用一个静态set保存起来。
*/
@ServerEndpoint("/ws/yxd/{userId}") //WebSocket客户端建立连接的地址
@Component
@Slf4j
public class WebSocketServerEndpoint {
    
    /**
    * 存活的session集合（使用线程安全的map保存）
    */
    private static Map<String, Session> livingSessions = new ConcurrentHashMap<>();
    
    /**
    * 建立连接的回调方法
    *
    * @param session 与客户端的WebSocket连接会话
    * @param userId  用户名，WebSocket支持路径参数
    */
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId) {
        livingSessions.put(session.getId(), session);
        log.info(userId + "进入连接");
    }
    
    @OnMessage
    public void onMessage(String message, Session session, @PathParam("userId") String userId) {
        log.info(userId + " : " + message);
        sendMessageToAll(userId + " : " + message);
    }
    
    
    @OnError
    public void onError(Session session, Throwable error) {
        log.info("发生错误");
        log.error(error.getStackTrace() + "");
    }
    
    
    @OnClose
    public void onClose(Session session, @PathParam("userId") String userId) {
        livingSessions.remove(session.getId());
        log.info(userId + " 关闭连接");
    }
    
    /**
    * 单独发送消息
    *
    * @param session
    * @param message
    */
    public void sendMessage(Session session, String message) {
        try {
            session.getBasicRemote().sendText(message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    /**
    * 群发消息
    *
    * @param message
    */
    public void sendMessageToAll(String message) {
        MessageVo messageVo = JSONObject.parseObject(message, MessageVo.class);
        livingSessions.forEach((sessionId, session) -> {
            //发给指定的接收用户
            //            if (userId.equals(messageVo.getReceiveUserId())) {
            sendMessage(session, message);
            //            }
        });
    }
    
}

3.8 编写客服端

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
<div id="msgs">这是消息</div>

</body>

<script>
        
        var ws = null;
		var xt = 0;
		var url = "ws://localhost:8080/ws/yxd/1";
		
		function createWebSocket(){
			try {
				   ws = new WebSocket(url);
			   } catch (e) {
				   reconnect();
			   }
		
		}
		
		function reconnect(){
			createWebSocket();
		
		}
		
		if(ws == null ){
			reconnect();
			
		}
		
		
		//申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
        ws.onopen = function () {
            //当WebSocket创建成功时，触发onopen事件
            console.log("open");
        }
        ws.onmessage = function (e) {
            //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
            console.log(e.data);
        }
        ws.onclose = function (e) {
            //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
            console.log("close");
			reconnect();
			
        }
        ws.onerror = function (e) {
            //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
            console.log(error);
        }  

		
		//心跳 防止长时间没有传输信息 断链接
	 /** setInterval(function(){
		  if(xt >= 2){
			  console.log("重新链接");
			  reconnect();
			  xt = 0;
		  }else{
			  xt++;
		  }
		  
	  },5000)*/

		
        
    </script>
</html>

3.9 编写测试类

package com.qf.controller;

import com.qf.config.mq2.Sender;
import com.qf.vo.MessageVo;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author ：_my
 * @date ：Created in 2021/12/22 10:29
 * @description：测试websocket
 * @modified By：`
 * @version: 1.0
 */
@RestController
@Slf4j
public class TestController {
    @Autowired
    Sender sender;
    /**
     * 接口：
     * 调用向队列中发送消息的方法
     */
    @RequestMapping("senderMsg")
    public void senderMsg() {
        MessageVo messageVo = new MessageVo();
        messageVo.setReceiveUserId("1");
        messageVo.setRoutingKey("contract");
        sender.send(messageVo);
    }

}

测试结果
image.png

静者，随心
关注
专栏目录
WebSocket整合SSM(Spring,Struts2,Maven)的实现示例
08-26
总的来说，整合 WebSocket 与 SSM 能够充分利用 WebSocket 的优势，实现实时、高效的双向通信，同时利用 Spring、Struts2 和 Maven 提供的成熟架构和开发便利。然而，需要注意的是，WebSocket 也可能带来额外的复杂...
Websocket实现wss协议连接支持语音聊天功能
am的博客
10-29 5260
部署单页应用 SPA 时，我们通常使用 Nginx 做中间层进行转发代理。为了保护 Web 安全，要求我们使用 HTTPS（HTTP + SSL） 以及 WSS（Websocket + SSL） 进行通信。HTTPS 及 WSS 协议旨在保护用户数据在网络上不被窃听（机密性） 和不被篡改（完整性）。 HTTP 与 HTTPS 区别 HTTPS 协议需要到 CA 申请证书，一般免费证书较少，因而需要一定费用； HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输
websocket深入浅出
Leon的博客
12-17 13万+
websocket简介 websocket是什么 答: 它是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 为什么需要websocket? 疑问? 我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？ 答: 因为 HTTP 协议有一个缺陷：通信只能由客户端发起 我们都知道轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP...
Springboot整合websocket(附详细案例代码)
最新发布
weixin_46425661的博客
09-09 3980
本文主要介绍WebSocket的概念，和在springboot项目中的使用。
Websocket 详解
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
11-17 1万+
详细了解websocket及应用
WebSocket
热门推荐
qq_54773998的博客
03-31 18万+
目录 一，什么是websocket 二，websocket的原理 三，websocket与http的关系 四，websocket解决的问题 1.http存在的问题 2.long poll(长轮询) 3.Ajax轮询 4.websocket的改进 一，什么是websocket WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议） 它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的 Websocket是一个
【WebSocket】协议详解
Huang_Ds的博客
07-08 1万+
目录简介一、WebSocket是什么？二、使用WebSocket1.WebSocket工作原理 1.1 握手(建立连接) 1.2 数据传输2.WebSocket 2.1 事件 2.2 方法 2.3 属性 3.WebSocket优点总结​​​​​​​ websocket是html5提供的一种浏览器与服务器进行全面双工通讯的网络技术，是基于TCP传输的应用层协议 ​​​​​​​WebSocketWebSocketW
一篇文章彻底搞懂websocket协议的原理与应用（一）
Ethereal的博客
07-04 7455
WebSocket协议的原理与应用（一）
Spring整合websocket整合应用示例（下）
09-02
【Spring整合WebSocket应用示例（下）】 在Spring框架中集成WebSocket技术，可以构建实时通信的应用，例如在线聊天、实时推送通知等。本篇将继续上文的讲解，着重介绍Spring WebSocket的核心业务实现类——`...
spring+websocket整合
07-04
在"spring+websocket整合"这个主题中，我们将重点讨论以下关键知识点： 1. **配置WebSocket**： 在Spring中，我们需要在配置类中启用WebSocket支持，并配置WebSocket消息处理端点。这通常涉及`WebSocketConfigurer...
WebSocket整合SpringBoot、SockJS、Stomp、Rabbitmq分布式消息推送
06-20
（1）HTML5 WebSocket、异常重连、心跳检测； （2）SockJS、Stomp、RabbitMQ Stomp消息代理；...（6）Websocket拦截器结合 Spring security、jwt token认证授权。 （7）VUE+elementUI前后分离实现。
Spring MVC websocket整合
12-15
在Spring MVC框架中整合WebSocket，可以构建高效且实时的Web应用，例如在线聊天、实时股票更新、游戏等场景。本文将详细介绍如何在Spring MVC项目中集成WebSocket，并提供相关配置和实现步骤。 首先，我们需要引入...
WebSocket(保姆级教学)
weixin_70563938的博客
10-31 5523
快速了解WebSocket，对WebSocket的介绍堪称保姆级，初学者上手即可使用
websocket菜鸟教程（１.１）
weixin_48305373的博客
04-20 3408
创建自己的websocket服务 先了解node.js websocket 的基本使用https://www.npmjs.com/package/nodejs-websocket 第一步先安装 npm install nodejs-websocket 第二部引入（在app.js中引入） const ws = require("nodejs-websocket") 代码 const ws = require("nodejs-websocket") const PORT=3000 const serve
WebSocket详解
dfc_dfc的博客
01-29 3538
WebSocket详解：5分钟从入门到精通！！！
WebSocket详解（一）：初步认识WebSocket技术
dd1095的博客
02-03 1552
1.什么是Socket？什么是WebSocket？ 对于第1次听说WebSocket技术的人来说，两者有什么区别？websocket是仅仅将socket的概念移植到浏览器中的实现吗？我们知道，在网络中的两个应用程序（进程）需要全双工相互通信（全双工即双方可同时向对方发送消息），需要用到的就是socket，它能够提供端对端通信，对于程序员来讲，他只需要在某个应用程序的一端（暂且称之为客户...
WebSocket菜鸟教程
weixin_48305373的博客
04-20 4万+
WebSocket菜鸟教程 WebSocket菜鸟教程 看到这想必你了解了webscoket,基本文档原理就不提了！ 这张图你能看明白吗？不能没事还有一张更简单的 搞懂这个图很关键，我们与人聊天不是在面对面聊天，其实在于服务器聊天，传统的http是客户端发起请求服务器响应请求，重点是服务器无法给客户端发起请求websocket说白了就是解决这个问题，第一张图轮询是每隔一段时间客户端就向服务器发起请求有没有小明发过来的问话，没有就再隔一段事件再问，这会造成服务器压力很大！！！ 前言 手把手撸websock
WebSocket是什么，怎么用
weixin_42560424的博客
06-25 2687
提供了一种强大的实时通信解决方案，适用于实时聊天、实时数据更新、多人协作和游戏等应用场景。然而，开发者需要在兼容性、长连接维护、安全性和服务器支持等方面进行综合考虑，并根据应用的需求选择合适的通信方案。在建立连接后会保持持久连接，使得服务器和客户端可以实时地交换信息，而无需频繁地发起请求。使用持久连接，减少了每个请求的开销，并且通过数据帧的方式传输数据，减少了数据的开销。使用长连接，需要维护连接状态，这可能增加服务器的负载，并占用客户端和服务器的资源。时，需要考虑兼容性问题，并提供替代方案。
websocket 简介
thlzjfefe的博客
08-24 1345
websocket为一次HTTP握手后，后续通讯为tcp协议的通讯方式。WebSocket 使用一种被称作。因此，使用 WebSocket 的应用程序将始终以 HTTP/S 开始，然后进行升级。这种升级发生在什么时候取决于具体的应用;可以在应用启动的时候，或者当一个特定的 URL 被请求的时候。在我们的应用中，仅当 URL 请求以“/ws”结束时，我们才升级协议为WebSocket。否则，服务器将使用基本的 HTTP/S。一旦连接升级，之后的数据传输都将使用 WebSocket。
WebSocket整合SSM实战教程
"WebSocket整合SSM(Spring, Struts2, Maven)的实现示例" WebSocket技术的出现，为实现服务器与客户端的实时双向通信提供了强大的支持。与传统的HTTP协议不同，WebSocket可以在一次连接建立后保持长连接，允许服务端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值