springbootの+のVUEで使用されるのWebSocket

図1は、springbootの実現のWebSocket

  Javaの背景には、WebSocketのは、次のように構成されたサーバーとして構成されています

@Configuration
 パブリック クラスWebSocketConfig { 
  
    @Bean(名 = "serverEndpointExporter" 公衆ServerEndpointExporter getServerEndpointExporterBean(){
         戻り 新しい)(ServerEndpointExporterします。
    } 
}

  上記の構成を追加した後、次のように、あなた自身のWebSocketの実装クラスを編集することができます

@Component 
@ServerEndpoint(値 = "/ messageSocket / {}はuserId" パブリック クラスMessageWebSocket { 

    プライベート 静的 最終ロガーロガー= LoggerFactory.getLogger(MessageWebSocket。クラス); 

    / ** 
     *静的変数、オープン接続の現在の数を記録します。スレッドセーフであるように設計されなければなりません。
     * / 
    プライベート 静的 int型 onlineCount = 0 ; 

    / ** 
     *キー:のuserId値:sessionIDs 
     * / 
    プライベート 静的のConcurrentHashMap <Integer型、ConcurrentLinkedQueue <文字列>> userSessionMap =の   新しい新しいのConcurrentHashMapの<> (); 

    / **
     *各クライアントに対応するMyWebSocketオブジェクトを格納するために使用されるスレッドセーフマップの同時パッケージ。
     * / 
    プライベート 静的のConcurrentHashMap <文字列、MessageWebSocket> = websocketMapの新しい新しいのConcurrentHashMap <>の(); 

    / ** 
     *キー:セッションID値:userIdを
     * / 
    プライベート 静的のConcurrentHashMap <文字列、整数> = sessionUserMapの新しい新しいのConcurrentHashMap <>の(); 

    / * * 
     *現在のセッション、あなたはそれを介してクライアントにデータを送信する必要がある
     * / 
    プライベートセッションのセッション; 

    / ** 
     の*呼び出しが成功した接続確立方法
     * * / 
    @OnOpen 
    公共 のボイド開く時](セッションセッション、@PathParam(「はuserId」)整数USERID){ 
        のSystem.out.println(ApplicationContextの); 
        試す{
             この .session = セッションを。
            ストリングセッションID = session.getId()。
            // 建立のuserId和セッションID的关系
            場合(userSessionMap.containsKey(USERID)){ 
                userSessionMap.get(USERID).add(セッションID)。
            } { 
                ConcurrentLinkedQueue <ストリング>キュー= 新しい ConcurrentLinkedQueue <> (); 
                queue.add(セッションID)。
                userSessionMap.put(userIdを、キュー)。
            }
            sessionUserMap.put(セッションID、USERID); 
            // セッションIDの参照との関係構築のWebSocket 
            IF(!{websocketMap.containsKey(セッションID))
                websocketMap.put(セッションID、この); 
                addOnlineCount();            // ラインプラスワン
            } 
        } キャッチ(例外E){ 
            logger.error( "接続に失敗しました" ); 
            ストリングES = ExceptionUtils.getFullStackTrace(E)
            ; logger.error(ES)
        } 
    } 

    / ** 
     メソッド呼び出し接続がクローズされる* 
     * / 
    @OnClose 
    公共 ボイドOnCloseの(){ 
        文字列セッションID = この.session.getId()。
        // 移除のuserId和セッションID的关系 
        整数のuserId = sessionUserMap.get(セッションID)。
        sessionUserMap.remove(セッションID)。
        もし(!のuserId = NULL ){ 
            ConcurrentLinkedQueue <ストリング> sessionIds = userSessionMap.get(USERID)。
            もし(!sessionIds = ヌル){ 
                sessionIds.remove(セッションID); 
                もし(sessionIds.size()== 0 ){ 
                    userSessionMap.remove(USERID)。
                } 
            } 
        }
        // セッションIDをWebSocketの関係を削除し、
        IF (websocketMap.containsKey(セッションID)){ 
            websocketMap.remove(セッションID); 
            subOnlineCount();            // 行数マイナス1 
        } 
    } 

    / ** 
     *クライアント・メッセージ・コールを受信した後方法
     * 
     * @paramのmessageStrクライアントによって送信されたメッセージ
     * * / 
    @OnMessage 
    公共 ボイドのonMessage(文字列messageStr、セッションセッション、@PathParam( "はuserId")整数useridは)スローにIOException { 
   
    } 

    / ** 
     * 
     * @param セッション
     *@paramの接続エラーがコールバック発生するエラー
      * / 
    @OnError 
    公共 ボイドのonError(セッションセッションのThrowableエラー){ 
        ストリングES = ; ExceptionUtils.getFullStackTrace(エラー)
        logger.error(ES); 
    } 


    / ** 
     *サーバを積極的に実施しますプッシュする
     * / 
    公共 ボイドのsendMessage(メッセージ文字列、整数toUserId)がスローIOExceptionが{
         IF(toUserId =!ヌル &&!StringUtil.isEmpty(message.trim())){ 
            ConcurrentLinkedQueue <文字列> = sessionIDs userSessionMap.get(toUserId);
             IF(sessionIDsを!=NULL ){
                 ため(文字列セッションID:sessionIDs){ 
                    MessageWebSocketソケット = websocketMap.get(セッションID)
                    。socket.session.getBasicRemote()sendText、(メッセージ); 
                } 
            } 
        } { 
            logger.error(「見つかりません受信するユーザの接続、ユーザ接続または切断されていません" ); 
        } 
    } 

    公共 ボイドのsendMessage(文字列メッセージ、セッションセッション)がスローにIOException { 
        session.getBasicRemote()sendText、(メッセージ);. 
    } 

     / ** 
    *は、行の数が取得
    * / 
    公共の 静的な 同期 int型getOnlineCount(){
         返すonlineCountを; 
    } 
     / ** 
    *行番号プラス1 
    * / 
    パブリック 静的 同期 無効addOnlineCount(){ 
        MessageWebSocket.onlineCount ++ ; 
    } 
    / ** 
    *数直線を保存
    * / 
    パブリック 静的 同期 ボイドsubOnlineCount(){ 
        MessageWebSocket.onlineCount - ; 
    } 
}

この最後の作業は、すでにバックグラウンドサービスを行って、そしてどのようにそれのクライアントのフロントエンドとして接続するには、読むことを続けてくださいました。

切断を達成するために、自動的に私たちが使用し、再接続-websocket.jsコンポーネントを再接続

// WebSocketの接続インスタンス 
聞かせてのWebSocket = ヌル; 

// 最初のトークのWebSocketのサンプル
関数initWebSocket(userIdを、onMessageFunc){
     // >ここではあなたの要求のパスです- WSアドレス 
    のletホストurlConfig.wsUrl + = 'messageSocket /' + のuserId ;
     IF( 'のWebSocket' における窓){ 
        用WebSocket = 新しい新しいReconnectingWebSocket(ホスト);
         // 接続エラー 
        websocket.onerror = 関数(){ 
        } 

        // 接続が成功 
        websocket.onopen = 関数(){ 
        } 

        //コールバック・メッセージが受信され、情報がe.data受信 
        websocket.onmessage = 関数(E){ 
        } 

        // 接続が閉じたコールバックである 
        websocket.onclose = 関数(){ 
        }を
        
        // ウィンドウが閉じられたときに、ウィンドウのclosingイベントをリッスン、ウィンドウを閉じていない接続を防ぐために、WebSocketをアクティブな接続、切断を閉じるには、サーバー側が例外をスローします。
        = window.onbeforeunload 関数(){ 
            closeWebSocket(); 
        } 
    } { 
        アラート( '現在のブラウザはのWebSocketをサポートしていません' リターン; 
    } 
} 

// 近くのWebSocket接続
機能closeWebSocket(){ 
    websocket.close()。
} 

//メッセージ送信
機能のsendMessage(メッセージ){ 
   websocket.send(メッセージ); 
}

このように、単純な完全なのWebSocketが完了している、特定の機能はとても基本的な拡張することができます。

 

  

おすすめ

転載: www.cnblogs.com/zxb1996/p/simple_websocket.html