网络知识 娱乐 springboot websocket全套模板,省去搭建的烦恼

springboot websocket全套模板,省去搭建的烦恼

这篇文章主要是记录一下websocket 的基本创建,前后端测试。

在springboot的环境下创建普通的websocket 和 reactor模式的 websocket

1、聊点技术

springboot websocket全套模板,省去搭建的烦恼

1.websocket出现的原因

Web Socket是Html5中引入的通信机制,它为浏览器与后台服务器之间提供了基于TCP的全双工的通信通道。

是为了解决网页及时刷新页面时长轮询的问题。

webSocket在建立之前需要先与后台服务器进行握手,然后升级为socket连接。

2、websocket协议对比

Http:解决长轮询的问题,减少协议头,http会在每次协议的时候携带http header

socket:对比socket 会多一次握手

3、websocket协议

ws和wss分别代表明文和密文的websocket协议

和http ,https 一样的区别

ws://localhost:8080/websocket

https 则是wss

4、游戏的选择

常规选择tcp 协议,

对于页游,或者一些使用js开发的使用websocket

对实时性要求较高的使用udp,kdp 等类似可靠udp协议

2、普通的websocket服务器

常规的springboot创建,在创建项目的时候,勾选websocket

springboot websocket全套模板,省去搭建的烦恼

或者直接在pom添加依赖,同样的效果

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

将需要公开的协议进行暴露

@Configurationnpublic class WebsocketConfig {n n @Beann public ServerEndpointExporter serverEndpointExporter(){n return new ServerEndpointExporter();n }n}n

websocket的服务端协议,最简版,去掉了一些有的没的,这里只是一个模板,根据自己的业务填充扩展

import org.slf4j.Logger;nimport org.slf4j.LoggerFactory;nimport org.springframework.stereotype.Component;n nimport javax.websocket.*;nimport javax.websocket.server.ServerEndpoint;n n@Componentn@ServerEndpoint("/websocket")npublic class WebsocketServer {n n private static Logger logger = LoggerFactory.getLogger(WebsocketServer.class);n /**n * 连接建立成功调用的方法n */n @OnOpenn public void onOpen(Session session) {n try {n logger.info("建立连接");n } catch (Exception e) {n logger.error("websocket IO异常");n }n }n n /**n * 连接关闭调用的方法n */n @OnClosen public void onClose() {n logger.info("连接关闭!");n }n n /**n * 收到客户端消息后调用的方法n *n * @param message 客户端发送过来的消息n */n @OnMessagen public void onMessage(String message, Session session) {n logger.info("收到来自窗口 {} 的信息:{}" ,session.getId(), message);n }n n /**n * @param sessionn * @param errorn */n @OnErrorn public void onError(Session session, Throwable error) {n logger.error("发生错误");n error.printStackTrace();n }n n}n

这是个最普通的websocket的协议,可以看到在springboot是非常简单的

3、reactor模式的websocket

因为公司有些项目是使用的webflux,虽然一直很不习惯,也不喜欢,但是没办法,硬着头皮上,也记录一个模板。

在创建项目的时候勾选 Spring Reactive web

springboot websocket全套模板,省去搭建的烦恼

同样也可以直接在pom中增加依赖

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

配置下处理器,可以看到拆分的接口很不友好,难用,需要自己拆

import org.slf4j.Logger;nimport org.slf4j.LoggerFactory;nimport org.springframework.stereotype.Component;nimport org.springframework.web.reactive.socket.WebSocketHandler;nimport org.springframework.web.reactive.socket.WebSocketSession;nimport reactor.core.publisher.Mono;n n/**n * 处理websocketn */n@Component("websocketHandler")npublic class TestWebsocketHandler implements WebSocketHandler {n n private Logger logger = LoggerFactory.getLogger(TestWebsocketHandler.class);n n @SuppressWarnings("unchecked")n @Overriden public Mono<Void> handle(WebSocketSession session) {n return session.receive().doOnNext(webSocketMessage -> {n session.send(Mono.just(session.textMessage("hello reactor"))).subscribe();n }).then();n }n}n

配置一下匹配的接口,也就是暴露端口。

import org.springframework.beans.factory.annotation.Autowired;nimport org.springframework.beans.factory.annotation.Qualifier;nimport org.springframework.context.annotation.Bean;nimport org.springframework.context.annotation.Configuration;nimport org.springframework.web.reactive.HandlerMapping;nimport org.springframework.web.reactive.handler.SimpleUrlHandlerMapping;nimport org.springframework.web.reactive.socket.WebSocketHandler;nimport org.springframework.web.reactive.socket.client.ReactorNettyWebSocketClient;nimport reactor.netty.http.client.HttpClient;nimport reactor.netty.http.client.WebsocketClientSpec;nimport reactor.netty.http.server.WebsocketServerSpec;n nimport java.util.HashMap;nimport java.util.Map;n n@Configurationnpublic class WebSocketConfig {n @Beann public HandlerMapping webSocketMapping(n @Autowired @Qualifier("websocketHandler") WebSocketHandler websocketHandler) {n Map<String, Object> map = new HashMap<>();n map.put("/websocket",websocketHandler );n SimpleUrlHandlerMapping simpleUrlHandlerMapping = new SimpleUrlHandlerMapping();n simpleUrlHandlerMapping.setUrlMap(map);n simpleUrlHandlerMapping.setOrder(10);n return simpleUrlHandlerMapping;n }n @Beann public ReactorNettyWebSocketClient nettyWebsockerClient(){n ReactorNettyWebSocketClient proxyClient = new ReactorNettyWebSocketClient(HttpClient.create(),n () -> WebsocketClientSpec.builder().maxFramePayloadLength(64 * 1024 * 1024));n return proxyClient;n }n}n

4、一个简单的websocket客户端

只是为了测试,简单的一个客户端源码

<!DOCTYPE html>n<html>n<head>n <meta charset="UTF-8">n <title>我是香菜</title>n</head>n<body>n<textarea id="msgBoxs"></textarea><br>n待发送消息:<input type="text" id="msg"><input type="button" id="sendBtn" onclick="send()" value="发送">n<script type="application/javascript">n var msgBoxs = document.getElementById("msgBoxs")n var msgBox = document.getElementById("msg")n document.cookie="token2=John Doe";n var ws = new WebSocket("ws://localhost:8080/websocket")n ws.onopen = function (evt) {n console.log("Connection open ...");n ws.send("Hello WebSocket!");n }n n ws.onmessage = function (evt) {n console.log("Received Message: ", evt.data)n var msgs = msgBoxs.valuen msgBoxs.innerText = msgs + "n" + evt.datan msgBoxs.scrollTop = msgBoxs.scrollHeight;n }n n ws.onclose = function (evt) {n console.log("Connect closed.");n }n n function send() {n var msg = msgBox.valuen ws.send(msg)n msgBox.value = ""n }n n</script>n</body>n</html>n

5、总结

websocket 在web开发中比较常用,一般是为了提升效率,在游戏用的比较少,因为有socket直接用。不会在选择多一步升级,同时也不需要使用http了,减轻负担。


作者:香菜_香菜
链接:https://juejin.cn/post/7111492884406206478
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。