快捷導(dǎo)航

springboot websocket簡單入門示例

更新時間：2018年08月15日 10:04:49 作者：王強勁

這篇文章主要介紹了springboot websocket簡單入門示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

之前做的需求都是客戶端請求服務(wù)器響應(yīng),新需求是服務(wù)器主動推送信息到客戶端.百度之后有流、長輪詢、websoket等方式進行.但是目前更加推崇且合理的顯然是websocket.

從springboot官網(wǎng)翻譯了一些資料,再加上百度簡單實現(xiàn)了springboot使用websocekt與客戶端的雙工通信.

1.首先搭建一個簡單的springboot環(huán)境

<!-- Inherit defaults from Spring Boot -->
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.4.RELEASE</version>
  </parent>

  <!-- Add typical dependencies for a web application -->
  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
  </dependencies>

2.引入springboot整合websocket依賴

<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-websocket -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
  <version>2.0.4.RELEASE</version>
</dependency>

3.創(chuàng)建啟動springboot的核心類

package com;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class GlobalConfig {
  public static void main(String[] args) {
    SpringApplication.run(GlobalConfig.class, args);
  }
}

4.創(chuàng)建websocket服務(wù)器

正如springboot 官網(wǎng)推薦的websocket案例,需要實現(xiàn)WebSocketHandler或者繼承TextWebSocketHandler/BinaryWebSocketHandler當中的任意一個.

package com.xiaoer.handler;

import com.alibaba.fastjson.JSONObject;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.util.HashMap;
import java.util.Map;

/**
 * 相當于controller的處理器
 */
public class MyHandler extends TextWebSocketHandler {
  @Override
  protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    String payload = message.getPayload();
    Map<String, String> map = JSONObject.parseObject(payload, HashMap.class);
    System.out.println("=====接受到的數(shù)據(jù)"+map);
    session.sendMessage(new TextMessage("服務(wù)器返回收到的信息," + payload));
  }
}

5.注冊處理器

package com.xiaoer.config;

import com.xiaoer.handler.MyHandler;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
  @Override
  public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(myHandler(), "myHandler/{ID}");
  }
  public WebSocketHandler myHandler() {
    return new MyHandler();
  }

}

6.運行訪問

出現(xiàn)如上圖是因為不能直接通過http協(xié)議訪問,需要通過html5的ws://協(xié)議進行訪問.

7.創(chuàng)建Html5 客戶端

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <input id="text" type="text" />
    <button onclick="send()">Send</button>  
    <button onclick="closeWebSocket()">Close</button>
    <div id="message">
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
      
      var userID="888";
      var websocket=null;

      $(function(){
        connectWebSocket();
      })
      
      //建立WebSocket連接
      function connectWebSocket(){

        console.log("開始...");
       
       //建立webSocket連接
        websocket = new WebSocket("ws://127.0.0.1:8080/myHandler/ID="+userID);
       
       //打開webSokcet連接時，回調(diào)該函數(shù)
        websocket.onopen = function () {   
          console.log("onpen"); 
        }
        
        //關(guān)閉webSocket連接時，回調(diào)該函數(shù)
        websocket.onclose = function () {
        //關(guān)閉連接  
          console.log("onclose");
        }

        //接收信息
        websocket.onmessage = function (msg) {
          console.log(msg.data);
        }

      }
      //發(fā)送消息
      function send(){
        var postValue={};
        postValue.id=userID;
        postValue.message=$("#text").val();     
        websocket.send(JSON.stringify(postValue));
      }
      //關(guān)閉連接
      function closeWebSocket(){
        if(websocket != null) {
          websocket.close();
        }
      }
    </script>
  </body>
</html>

8.運行

利用客戶端運行之后仍然會出現(xiàn)上圖中的一連接就中斷了websocket連接.

這是因為spring默認不接受跨域訪問:

As of Spring Framework 4.1.5, the default behavior for WebSocket and SockJS is to accept only same origin requests.

需要在WebSocketConfig中設(shè)置setAllowedOrigins.

package com.xiaoer.config;

import com.xiaoer.handler.MyHandler;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
  @Override
  public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(myHandler(), "myHandler/{ID}")
      .setAllowedOrigins("*");
  }
  public WebSocketHandler myHandler() {
    return new MyHandler();
  }

}

如下圖,并未輸出中斷,說明連接成功.