springboot+vue:实现webScoket（springMVC通用，导的包不一样）

1.导入jar包

compile group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version:'1.5.4.RELEASE'

2.后台spring

ChatHandshakeInterceptor.java(过滤器)

import java.util.Map;

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.HandshakeInterceptor;

/**

 * websocket 的链接建立是基于 http 握手协议，我们可以添加一个拦截器处理握手之前和握手之后过程

 */

@ Component

public class ChatHandshakeInterceptor implements HandshakeInterceptor {

     

      /**

     * 握手之前，若返回false，则不建立链接

     */

      @Override

      public boolean beforeHandshake(ServerHttpRequest request , ServerHttpResponse response , WebSocketHandler wsHandler ,

                Map<String, Object> attributes ) throws Exception {

           

           System. out .println( "--------------握手开始..." + wsHandler );

            return true ;

     }

     

      /**

     * 握手之后

     */

      @Override

      public void afterHandshake(ServerHttpRequest request , ServerHttpResponse response , WebSocketHandler wsHandler ,

                Exception exception ) {

           System. out .println( "--------------握手成功啦..." );

     }

}

ChatWebSocketHandler.java（主要操作）

import org.springframework.stereotype.Component;

import org.springframework.web.socket.CloseStatus;

import org.springframework.web.socket.TextMessage;

import org.springframework.web.socket.WebSocketHandler;

import org.springframework.web.socket.WebSocketMessage;

import org.springframework.web.socket.WebSocketSession;

@Component

public class ChatWebSocketHandler implements WebSocketHandler {

     

      /**

      * webscoket 建立好链接之后的处理函数 -- 连接建立后的准备工作

      */

      @Override

      public void afterConnectionEstablished(WebSocketSession session ) throws Exception {

            // TODO Auto-generated method stub

           System. out .println( "webscoket建立好链接之后的处理函数--连接建立后的准备工作" );

           

            //向客户端发送消息

           TextMessage message = new TextMessage( "从服务端发送的请求...链接建立成功" );

            session .sendMessage( message );

     }

     

      /**

     * 客户端发送服务器的消息时的处理函数，在这里收到消息之后可以分发消息

     */

      //处理消息：当一个新的WebSocket到达的时候，会被调用（在客户端通过 Websocket API发送的消息会经过这里，然后进行相应的处理）

      @Override

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

            // TODO Auto-generated method stub

           System. out .println( "客户端发送服务器的消息时的处理函数，在这里收到消息之后可以分发消息" + message + "...." + session );

           

            //向客户端发送消息

            session .sendMessage( new TextMessage( "发送给客户端" ));

     }

     

      /**

     * 消息传输过程中出现的异常处理函数

     * 处理传输错误：处理由底层WebSocket消息传输过程中发生的异常

     */

      @Override

      public void handleTransportError(WebSocketSession session , Throwable exception ) throws Exception {

            // TODO Auto-generated method stub

           System. out .println( "消息传输过程中出现的异常处理函数" );

     }

     

      /**

     * websocket 链接关闭的回调

     * 连接关闭后：一般是回收资源等

     */

      @Override

      public void afterConnectionClosed(WebSocketSession session , CloseStatus closeStatus ) throws Exception {

            // TODO Auto-generated method stub

           System. out .println( "websocket链接关闭的回调" );

     }

     

      /**

     * 是否支持处理拆分消息，返回true返回拆分消息

     */

      //是否支持部分消息：如果设置为true，那么一个大的或未知尺寸的消息将会被分割，并会收到多次消息（会通过多次调用方法handleMessage(WebSocketSession, WebSocketMessage). ）

      //如果分为多条消息，那么可以通过一个api：org.springframework.web.socket.WebSocketMessage.isLast() 是否是某条消息的最后一部分。

      //默认一般为false，消息不分割

      @Override

      public boolean supportsPartialMessages() {

            // TODO Auto-generated method stub

            return false ;

     }

     

}

WebSocketConfig.java (配置webscoket)

import org.springframework.beans.factory.annotation.Autowired;

import  org.springframework.stereotype.Component;

import org.springframework.web.socket.config.annotation.EnableWebSocket;

import org.springframework.web.socket.config.annotation.WebSocketConfigurer;

import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

/**

 *

 * 说明：WebScoket配置处理器

 * 把处理器和拦截器注册到spring websocket 中

 */

@Component

//配置开启WebSocket服务用来接收 ws 请求

@EnableWebSocket

public class WebSocketConfig implements WebSocketConfigurer {

     

      //注入处理器

      @Autowired

      private ChatWebSocketHandler webSocketHandler ;

      @Autowired

      private ChatHandshakeInterceptor chatHandshakeInterceptor ;

     

      public void registerWebSocketHandlers(WebSocketHandlerRegistry registry ) {

            //添加一个处理器还有定义处理器的处理路径（ 注意 ：报403加.setAllowedOrigins("*")）

            registry .addHandler( webSocketHandler , "/ws" ).addInterceptors( chatHandshakeInterceptor ).setAllowedOrigins( "*" );

            /*

            * 在这里我们用到.withSockJS()，SockJS是spring用来处理浏览器对 websocket 的兼容性，

            * 目前浏览器支持 websocket 还不是很好，特别是IE11以下.

            * SockJS能根据浏览器能否支持 websocket 来提供三种方式用于 websocket 请求，

            * 三种方式分别是 WebSocket, HTTP Streaming以及 HTTP Long Polling

            */

            registry .addHandler( webSocketHandler , "/ws/sockjs" ).addInterceptors( chatHandshakeInterceptor ).withSockJS();

     }

     

}

3.前台vue

testwebsocket.vue

< template >

    < Card >

       < div >

           < Button type = "primary" @ click = "threadPoxi()" icon = "plus" > 发送消息 </ Button >

       </ div >

    </ Card >

</ template >

< script >

export default {

     data () {

            return {

                websocket: null

           }

     },

     methods: {

           threadPoxi(){  // 实际调用的方法 如果ws已经连接则直接发送消息；如正在开启状态，则等待300毫秒，再发送消息；若未开启 ，则等待500毫秒，再发送消息。

            //参数

            const agentData = "从前台发出的信息" ;

            //若是ws开启状态

            if ( this .websocket.readyState === this .websocket.OPEN) {

                this .websocketsend(agentData)

            }

            // 若是 正在开启状态，则等待300毫秒

            else if ( this .websocket.readyState === this .websocket.CONNECTING) {

                let that = this ; //保存当前对象this

                setTimeout( function () {

                    that.websocketsend(agentData)

                }, 300);

            }

            // 若未开启 ，则等待500毫秒

            else {

                this .initWs();

                let that = this ; //保存当前对象this

                setTimeout( function () {

                    that.websocketsend(agentData)

                }, 500);

            }

        },

        initWs () {

            if ( 'WebSocket' in window) { 

                this .websocket = new WebSocket( "ws://localhost:8089/项目名/ws" ); 

            } 

            else { 

                alert( 'Sorry, websocket not supported by your browser.' ) 

            }

            //数据接收

            this .websocket.onmessage = this .websocketonmessage;

            /*

            this.websocket.onclose = this.websocketclose; */

                 //this.websocket.close();

        },

        websocketonmessage(e){ //数据接收

           console.log( 'Client received a message' ,e.data);

        },

        websocketsend(agentData){ //数据发送

            this .websocket.send(agentData);

        },

        websocketclose(e){  //关闭

            this .websocket.close();

            console.log( "connection closed (" + e.code + ")" );

        }

       

     },

     created(){

            this .initWs();

     }

}

</ script >

欢迎指正，转载请说明。