WebSocket 通信流程,注解和Spring实现WebSocket ,实战多人聊天室系统

avatar
作者
猴君
阅读量:0

一、前言

实现即时通信常见的有四种方式-分别是:轮询、长轮询(comet)、长连接(SSE)、WebSocket

①短轮询

很多网站为了实现推送技术,所用的技术都是轮询。轮询是在特定的的时间间隔(如每1秒),由客户端浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。

优点:后端编码比较简单

缺点:这种传统的模式带来很明显的缺点, 由于HTTP请求是单向的,是只能由客户端发起请求,由服务端响应的【请求-响应模式】,即客户端的浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

短轮询

短轮询

②长轮询

客户端向发起一个到服务端的请求,然后服务端一直保持连接打开,直到数据发送到客户端为止

优点:避免了服务端在没有信息更新时的频繁请求,节省流量

缺点:服务器一直保持连接会消耗资源,需要同时维护多个线程,而服务器所能承载的 TCP 连接是有上限的,所以这种轮询很容易导致连接上限

长轮询

长轮询

③长连接

客户端和服务端建立连接后不进行断开,之后客户端再次访问这个服务端上的内容时,继续使用这一条连接通道(长轮询是一次发送完后就断开了,)

优点:消息即时到达,不发无用请求

缺点:与长轮询一样,服务器一直保持连接是会消耗资源的,如果有大量的长连接的话,对于服务器的消耗是巨大的,而且服务器承受能力是有上限的,不可能维持无限个长连接。

HTTP长连接

HTTP长连接

④WebSocket

客户端向服务器发送一个携带特殊信息的请求头(Upgrade:WebSocket )建立连接,建立连接后双方即可实现自由的实时双向通信。

优点:

  • 较少的控制开销。在连接创建后,服务器和客户端之间交换数据时,用于协议控制的数据包头部相对较小。
  • 更强的实时性。由于协议是全双工的,所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应,延迟明显更少;即使是和Comet等类似的长轮询比较,其也能在短时间内更多次地传递数据。
  • 保持连接状态。与HTTP不同的是,Websocket需要先创建连接,这就使得其成为一种有状态的协议,之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息(如身份认证等)。

缺点:相对来说,开发成本和难度更高

WebSocket

WebSocket

⑤对比总结

轮询(Polling)

长轮询(Long-Polling)

Websocket

长连接(SSE)

通信协议

http

http

tcp

http

触发方式

client(客户端)

client(客户端)

client、server(客户端、服务端)

client、server(客户端、服务端)

优点

兼容性好容错性强,实现简单

比短轮询节约资源

全双工通讯协议,性能开销小、安全性高,可扩展性强

实现简便,开发成本低

缺点

安全性差,占较多的内存资源与请求数

安全性差,占较多的内存资源与请求数

传输数据需要进行二次解析,增加开发成本及难度

只适用高级浏览器

延迟

非实时,延迟取决于请求间隔

非实时,延迟取决于请求间隔

实时

非实时,默认3秒延迟,延迟可自定义

长连接和长轮询的区别: 长轮询的含义就是客户端发起请求,如果服务端的数据没有发生变更,那么就hold住请求,直到服务端的数据发生了变更,或者达到了一定的时间就会返回。这样就减少了客户端和服务端不断频繁连接和传递数据的过程,并且不会消耗服务端太多资源。长连接指的是TCP链接长久保持复用。

二、WebSocket概述

WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。很多网站为了实现推送技术,所用的技术都是轮询。轮询是在特定的时间间隔(如每1秒),由浏览器对服务器发出,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

而比较新的技术去做轮询的效果是长轮询(comet)。这种技术虽然可以双向通信,但依然需要反复发出请求。而且在Comet中,普遍采用的长链接,也会消耗服务器资源。

在这种情况下,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

1.Java接入WebSocket的两种方式

基于JAVA注解实现

服务端

package com.mc.wsdemo.java;  import lombok.extern.slf4j.Slf4j; import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype.Component;  import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.Map; import java.util.concurrent.ConcurrentHashMap;  /**  * 监听websocket地址/myWs  */ @ServerEndpoint("/myWs") @Component @Slf4j public class WsServerEndpont {     static Map<String,Session> sessionMap = new ConcurrentHashMap<>();     //连接建立时执行的操作     @OnOpen     public void onOpen(Session session){         sessionMap.put(session.getId(),session);         log.info("websocket is open");     }     //收到了客户端消息执行的操作     @OnMessage     public String onMessage(String text){         log.info("收到了一条消息:"+text);         return "已收到你的消息";     }     //连接关闭的时候执行的操作     @OnClose     public void onClose(Session session){         sessionMap.remove(session.getId());         log.info("websocket is close");     }       //每2s发送给客户端心跳消息,设置一个定时任务     @Scheduled(fixedRate = 2000)     public void sendMsg() throws IOException {         for(String key:sessionMap.keySet()){             sessionMap.get(key).getBasicRemote().sendText("心跳");         }     } } 

 配置类

package com.mc.wsdemo.java; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter;   @Configuration 注解表明这是一个Spring的配置类,其中包含了一些用于生成bean的方法。 ServerEndpointExporter 是Spring对WebSocket的支持类,它负责扫描并自动注册所有通过 @ServerEndpoint注解标记的WebSocket端点类。   @Bean 注解方法 serverEndpointExporter()告诉Spring容器去实例化一个ServerEndpointExporter  bean,并将其添加到IoC容器中。这样,在Spring应用启动时,ServerEndpointExporter就会自动发现 并注册那些使用了@ServerEndpoint注解的WebSocket端点,无需手动配置或初始化。     @Configuration public class WebSocketConfig {     @Bean     public ServerEndpointExporter serverEndpointExporter(){         return new ServerEndpointExporter();     } }

客户端

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>ws client</title> </head> <body> <p style="border:1px solid black;width: 600px;height: 500px" id="talkMsg"></p> <input id="message" /><button id="sendBtn" onclick="sendMsg()">发送</button> </body> <script>     let ws = new WebSocket("ws://localhost:8080/myWs1")     // ws.onopen=function () {     // }     ws.onmessage=function (message) {         document.getElementById("talkMsg").innerHTML = message.data     }     function sendMsg() {         ws.send(document.getElementById("message").value)         document.getElementById("message").value=""     } </script> </html>

效果

img

②Spring框架实现WebSocket服务器端:多人聊天室

package com.mc.wsdemo.spring;  import lombok.extern.slf4j.Slf4j; import org.springframework.http.server.ServerHttpRequest; import org.springframework.http.server.ServerHttpResponse; import org.springframework.stereotype.Component; import org.springframework.web.socket.WebSocketHandler; import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;  import java.util.Map;  /**  * 握手拦截器  *HttpSessionHandshakelnterceptor (抽象类):握手拦截器,在握手前后添加操作  */ @Component @Slf4j public class MyWsInterceptor extends HttpSessionHandshakeInterceptor {     @Override     public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {         //在这里实现自己逻辑,最后都要调用父类的方法         log.info(request.getRemoteAddress().toString()+"开始握手");         return super.beforeHandshake(request, response, wsHandler, attributes);     }      @Override     public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) {         log.info(request.getRemoteAddress().toString()+"完成握手");         super.afterHandshake(request, response, wsHandler, ex);     } }
/**  * web socket 主处理程序  * AbstractWebSocketHandler (抽象类) :WebSocket处理程序,监听连接前,连接中,连接后  */  @Slf4j @Component public class MyWsHandler extends AbstractWebSocketHandler {     private static Map<String,SessionBean> sessionBeanMap ;  //这里定义为一个map,这个Map<String,Session>这样写不能封装自己的信息,所以我们封装了一个sessionBeanMap     private static AtomicInteger clientIdMaker;//定义一个整型     private static StringBuffer stringBuffer;//定义一个字符串缓冲区     static {         sessionBeanMap = new ConcurrentHashMap<>();//在静态代码快里初始化map.         clientIdMaker = new AtomicInteger(0);//线程安全初始化整型         stringBuffer = new StringBuffer();     }      //连接建立     @Override     public void afterConnectionEstablished(WebSocketSession session) throws Exception {  在 MyWsHandler 中,自定义了在连接建立之后存储 SessionBean 并发送通知消息的操作,但同时通过调 用 super.afterConnectionEstablished(session) 确保没有遗漏掉 Spring WebSocket 框架内部预设的 连接管理逻辑。如果不调用 super 方法,可能会错过某些重要的框架内置功能,影响整个 WebSocket 服务 的正确运行。          super.afterConnectionEstablished(session);         SessionBean sessionBean = new SessionBean(session,clientIdMaker.getAndIncrement());//调用我们封装类的构造方法。         sessionBeanMap.put(session.getId(),sessionBean);         log.info(sessionBeanMap.get(session.getId()).getClientId()+"建立了连接");         stringBuffer.append(sessionBeanMap.get(session.getId()).getClientId()+"进入了群聊<br/>");         sendMessage(sessionBeanMap);     }     //收到消息     @Override     protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {         super.handleTextMessage(session, message);         log.info(sessionBeanMap.get(session.getId()).getClientId()+":"+message.getPayload());         stringBuffer.append(sessionBeanMap.get(session.getId()).getClientId()+":"+message.getPayload()+"<br/>");         sendMessage(sessionBeanMap);     }     //传输异常     @Override     public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {         super.handleTransportError(session, exception);         if(session.isOpen()){             session.close();         }         sessionBeanMap.remove(session.getId());     }     //连接关闭     @Override     public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {         super.afterConnectionClosed(session, status);         int clientId = sessionBeanMap.get(session.getId()).getClientId();         sessionBeanMap.remove(session);         log.info(clientId+"关闭了连接");         stringBuffer.append(clientId+"退出了群聊<br/>");         sendMessage(sessionBeanMap);     }  //    //每2s发送给客户端心跳消息 //    @Scheduled(fixedRate = 2000) //    public void sendMsg() throws IOException { //        for(String key:sessionBeanMap.keySet()){ //            sessionBeanMap.get(key).getWebSocketSession().sendMessage(new TextMessage("心跳")); //        } //    }     public void sendMessage(Map<String,SessionBean> sessionBeanMap){         for(String key:sessionBeanMap.keySet()){             try {                 sessionBeanMap.get(key).getWebSocketSession().sendMessage(new TextMessage(stringBuffer.toString()));             } catch (IOException e) { //                e.printStackTrace();                 log.error(e.getMessage());             }         }     } }
package com.mc.wsdemo.spring;  import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.config.annotation.EnableWebSocket; import org.springframework.web.socket.config.annotation.WebSocketConfigurer; import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;  import javax.annotation.Resource;  /** *WebSocketConfigurer (接口):配置程序,比如配置监听哪个端口 *上面的握手拦截器,处理程序的使用 */   @Configuration @EnableWebSocket public class MyWsConfig implements WebSocketConfigurer {     @Resource     MyWsHandler myWsHandler;     @Resource     MyWsInterceptor myWsInterceptor;     @Override     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {         registry.addHandler(myWsHandler,"/myWs1").addInterceptors(myWsInterceptor).setAllowedOrigins("*");     } }

package com.mc.wsdemo.spring;  import lombok.AllArgsConstructor; import lombok.Data; import org.springframework.web.socket.WebSocketSession;  @AllArgsConstructor @Data public class SessionBean {     这个是对原Session类的二次封装,加入了一些我们想要的信息,封装曾一个新的类,园session作为属性     private WebSocketSession webSocketSession;     private Integer clientId; }

    广告一刻

    为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!