websocket与sockJS

在这里插入图片描述

1、websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。传统的网站为了实现推送技术,所用的技术都是 Ajax 轮询。

2、SockJS

有一些浏览器中缺少对WebSocket的支持,而SockJS是一个浏览器的JavaScript库,它提供了一个类似于网络的对象,SockJS提供了一个连贯的,跨浏览器的JavaScriptAPI,它在浏览器和Web服务器之间创建了一个低延迟、全双工、跨域通信通道。SockJS的一大好处在于提供了浏览器兼容性。即优先使用原生WebSocket,如果浏览器不支持WebSocket,会自动降为轮询的方式。

3、前端使用websocket

在这里插入图片描述

4、前端使用SockJS

function connect() {    //连接服务器函数

         var socket = new SockJS(" URL ");   //URL需要连接的地址

        stompClient = Stomp.over(socket); 

        stompClient.connect({}, function(frame) { 

                	console.log('Connected: ' + frame)//连接服务器成功

                  //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息

                  //一对多

                stompClient.subscribe('/topic/getResponse',function(response){

                        showResponse(JSON.parse(response.body));

                });

                

       });

}

//关闭双通道

function disconnect(){

        if(stompClient != null) {

            stompClient.disconnect();

        }

 }

function showResponse(message){

      展示返回的信息

}

值得注意的是,只需要在连接服务器注册端点endPoint时,写访问服务器的全路径URL:

new SockJS('http://127.0.0.1:9091/sbjm-cheng/endpointOyzc');

其他监听指定服务器广播的URL不需要写全路径

stompClient.subscribe('/topic/getResponse',function(response){
                showResponse(JSON.parse(response.body));
});
要在Zuul中使用WebSocketSockJS,您需要进行以下配置: 1. 添加依赖项 ```xml <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-netflix-zuul</artifactId> </dependency> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId> </dependency> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-netflix-hystrix</artifactId> </dependency> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-netflix-zuul-websocket</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 2. 配置Zuul路由 ```yml zuul: routes: websocket: path: /websocket/** url: ws://localhost:8081 ``` 这将把所有以“/websocket”开头的请求路由到WebSocket服务器上。 3. 配置SockJS ```java @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); config.setApplicationDestinationPrefixes("/app"); } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/websocket").setAllowedOrigins("*").withSockJS(); } } ``` 这将配置一个SockJS端点,它将处理所有以“/websocket”开头的请求,并使用简单的代理模式将消息转发到“/topic”目的地。 4. 启用Zuul ```java @SpringBootApplication @EnableZuulProxy public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } } ``` 这将启用Zuul代理,并将它们路由到相应的WebSocket服务器和SockJS端点。 现在,您应该可以在Zuul中使用WebSocketSockJS了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值