java websocket 有更新!

  |   1 评论   |   421 浏览

    今天偶然看到websocket的相关问题,学习整理一下,也实际的试了一发,确实比较好用。如下:

    总的来说,要实现服务器端往客户端推送,还是用socket通信会比较合适。目前主流的浏览器也基本都支持的还不错,手机端也没啥问题。下面直接看实现。

    添加websocket依赖

    <dependency>
       <groupId>javax.websocket</groupId>
       <artifactId>javax.websocket-api</artifactId>
       <version>1.1</version>
       <scope>provided</scope>
    </dependency>
    

    java后台有继承类和注解的两种使用方式。注解的比较简单清晰,下面的测试是用的注解的方式。

    直接上java代码

    // 对应的访问地址,{userId}是参数,后面可以通过 @PathParam("userId")来获取
    @ServerEndpoint(value="/websocketTest/{userId}") 
    public class TestWebsocketController {
    
        private Logger logger = LoggerFactory.getLogger(TestWebsocketController.class);
    
        private static String userId;
    
        //建立连接
        @OnOpen
        public void onOpen(@PathParam("userId") String userId, Session session) {
            this.userId = userId;
            logger.debug("new connection: {}", userId);
        }
        //关闭连接
        @OnClose
        public void onClose() {
            logger.debug("close connection: {}", this.userId);
        }
        //收到客户端消息
        @OnMessage
        public void onMessage(String message, Session session) throws IOException, InterruptedException {
            logger.debug("received message from {}: {}", this,userId, message);
            session.getBasicRemote().sendText("received " + this.userId + " message");
            // 连续给客户端发送信息
            sendIntervalMsg(session);
        }
        //出错
        @OnError
        public void onError(Session session, Throwable error) {
            logger.debug("user id : {} connection has error", this.userId);
            error.printStackTrace();
        }
        //测试,后台连续给客户端发送信息
        public static void sendIntervalMsg(Session session) throws IOException, InterruptedException {
            for(int i = 0;i<10;i++) {
                Thread.sleep(1000);
                session.getBasicRemote().sendText("send from server " + i + " message");
            }
        }
    
    }
    

    上面的java代码应该写的很清楚了。下面来看客户端(此处是web)的代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            websocket Demo---- user000 <br />
            <input id="text" type="text" /> 
            <button onclick="send()"> Send </button>   
            <button onclick="closeWebSocket()"> Close </button>
            <div id="message">   </div>
    
        <script type="text/javascript">
         //判断当前浏览器是否支持WebSocket
          if('WebSocket' in window){
              websocket = new WebSocket("ws://localhost:8082/websocketTest/user000");
              console.log("link success")
          }else{
              alert('Not support websocket')
          }
    
          //连接发生错误的回调方法
          websocket.onerror = function(){
              setMessageInnerHTML("error");
          };
    
          //连接成功建立的回调方法
          websocket.onopen = function(event){
              setMessageInnerHTML("open");
          }
           console.log("-----")
          //接收到消息的回调方法
          websocket.onmessage = function(event){
                   setMessageInnerHTML(event.data);
          }
    
          //连接关闭的回调方法
          websocket.onclose = function(){
              setMessageInnerHTML("close");
          }
    
          //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
          window.onbeforeunload = function(){
              websocket.close();
          }
    
          //将消息显示在网页上
          function setMessageInnerHTML(innerHTML){
              document.getElementById('message').innerHTML += innerHTML + '<br/>';
          }
    
          //关闭连接
          function closeWebSocket(){
              websocket.close();
          }
    
          //发送消息
          function send(){
              var message = document.getElementById('text').value;
              websocket.send(message);
          }
        </script>
    
        </body>
    </html>
    
    

    这个也不用太多介绍,整体来看还是比较简单实现的。建立连接的请求头如下,会跟一般的http请求有些区别
    125e9e7d7d4e46519d406c635b2fb3e5-image.png

    成功之后后台会连续给前端发送消息,如下:
    912ce66e347247f7976bd1c5306c6889-image.png

    本文参考这篇博客

    评论

    发表评论

    validate