ws配置 zuul_SpringCloud 后端使用webSocket向前端推送消息

SpringCloud 后端使用webSocket向前端推送消息

1、webSocket

webSocket长连接是一种在单个tcp连接上进行全双工通信的协议,允许双向数据推送。一般微服务提供的restful API只是对前端请求做出相应。使用webSocket可以实现后端主动向前端推送消息。

2、springboot使用webSocket

1、pom文件添加依赖

org.springframework.boot

spring-boot-starter-websocket

2、添加webSocket配置

@Configuration

@EnableWebSocket

public class WebSocketAutoConfig implements WebSocketConfigurer {

@Override

public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {

// webSocket通道

// 指定处理器和路径

registry.addHandler(new WebSocketHandler(), "/websocket")

// 指定自定义拦截器

.addInterceptors(new WebSocketInterceptor())

// 允许跨域

.setAllowedOrigins("*");

// sockJs通道

registry.addHandler(new WebSocketHandler(), "/sock-js")

.addInterceptors(new WebSocketInterceptor())

.setAllowedOrigins("*")

// 开启sockJs支持

.withSockJS();

}

}

处理器代码:

public class WebSocketHandler extends AbstractWebSocketHandler {

/**

* 存储sessionId和webSocketSession

* 需要注意的是,webSocketSession没有提供无参构造,不能进行序列化,也就不能通过redis存储

* 在分布式系统中,要想别的办法实现webSocketSession共享

*/

private static Map sessionMap = new ConcurrentHashMap<>();

private static Map userMap = new ConcurrentHashMap<>();

/**

* webSocket连接创建后调用

*/

@Override

public void afterConnectionEstablished(WebSocketSession session) {

// 获取参数

String user = String.valueOf(session.getAttributes().get("user"));

userMap.put(user, session.getId());

sessionMap.put(session.getId(), session);

}

/**

* 接收到消息会调用

*/

@Override

public void handleMessage(WebSocketSession session, WebSocketMessage> message) throws Exception {

if (message instanceof TextMessage) {

} else if (message instanceof BinaryMessage) {

} else if (message instanceof PongMessage) {

} else {

System.out.println("Unexpected WebSocket message type: " + message);

}

}

/**

* 连接出错会调用

*/

@Override

public void handleTransportError(WebSocketSession session, Throwable exception) {

sessionMap.remove(session.getId());

}

/**

* 连接关闭会调用

*/

@Override

public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {

sessionMap.remove(session.getId());

}

@Override

public boolean supportsPartialMessages() {

return false;

}

/**

* 后端发送消息

*/

public void sendMessage(String user, String message){

String sessionId = userMap.get(user);

WebSocketSession session = sessionMap.get(sessionId);

session.sendMessage(new TextMessage(message));

}

}

自定义拦截器:

public class WebSocketInterceptor implements HandshakeInterceptor {

/**

* handler处理前调用,attributes属性最终在WebSocketSession里,可能通过webSocketSession.getAttributes().get(key值)获得

*/

@Override

public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map attributes) {

if (request instanceof ServletServerHttpRequest) {

ServletServerHttpRequest serverHttpRequest = (ServletServerHttpRequest) request;

// 获取请求路径携带的参数

String user = serverHttpRequest.getServletRequest().getParameter("user");

attributes.put("user", user);

return true;

} else {

return false;

}

}

@Override

public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception exception) {

}

}

3、前端连接webSocket

WebSocket对象是H5新增的对象,低版本浏览器可能不支持,可以使用sockJs的方式连接

WebSocket连接

// 打开一个 web socket

var ws = new WebSocket("ws://localhost:8080/websocket?user=Tony");

ws.onopen = function() {

// Web Socket 已连接上,使用 send() 方法发送数据

ws.send("测试发送");

console.log('open');

};

ws.onmessage = function (e) {

console.log('message', e.data);

};

ws.onclose = function() {

console.log('close');

};

SockJs连接

var sock = new SockJS('http://localhost:8080/sock-js?user=Tony');

sock.onopen = function() {

sock.send("测试发送");

console.log('open');

};

sock.onmessage = function(e) {

console.log('message', e.data);

};

sock.onclose = function() {

console.log('close');

};

4、SpringCloud使用zuul转发webSocket连接

zuul网关还需要做额外的配置,添加自定义过滤器:

@Component

public class WebSocketFilter extends ZuulFilter {

@Override

public String filterType() {

return "pre";

}

@Override

public int filterOrder() {

return 0;

}

@Override

public boolean shouldFilter() {

return true;

}

@Override

public Object run() {

RequestContext context = RequestContext.getCurrentContext();

HttpServletRequest request = context.getRequest();

String upgradeHeader = request.getHeader("Upgrade");

if (null == upgradeHeader) {

upgradeHeader = request.getHeader("upgrade");

}

if (null != upgradeHeader && "websocket".equalsIgnoreCase(upgradeHeader)) {

context.addZuulRequestHeader("connection", "Upgrade");

}

return null;

}

}

配置文件添加配置:

hystrix:

command:

default:

execution:

isolation:

thread:

timeoutInMilliseconds: 60000 #设置API网关中路由转发请求的HystrixCommand执行超时时间

ribbon:

ConnectTimeout: 3000 #设置路由转发请求的时候,创建请求连接的超时时间

ReadTimeout: 60000 #用来设置路由转发请求的超时时间

5、网关使用SpringCloud Gateway无需做任何处理

6、若使用了Nginx,需要添加配置

配置示例:

map $http_upgrade $connection_upgrade {

default upgrade;

'' close;

}

upstream websocket {

server 127.0.0.1:8080;

}

server {

listen 80;

location / {

proxy_pass http://websocket;

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection $connection_upgrade;

}

}

7. SpringCloud前端连接示例:

SockJs连接

var sock = new SockJS('http://(网关路径)/(服务名称)/sock-js?user=Tony');

sock.onopen = function() {

sock.send("测试发送");

console.log('open');

};

sock.onmessage = function(e) {

console.log('message', e.data);

};

sock.onclose = function() {

console.log('close');

};

WebSocket连接

// 打开一个 web socket

var ws = new WebSocket("ws://(网关路径)/(服务名称)/websocket?user=Tony");

ws.onopen = function() {

// Web Socket 已连接上,使用 send() 方法发送数据

ws.send("测试发送");

console.log('open');

};

ws.onmessage = function (e) {

console.log('message', e.data);

};

ws.onclose = function() {

console.log('close');

};

本文由 创作,采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。最后编辑时间为:

2020/08/07 02:47

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值