通過WebSocket和STOMP實現瀏覽器和伺服器的訊息通訊

阿新 • • 發佈：2019-01-20

非同步訊息

非同步訊息有兩個重要的概念，訊息代理（broker）和目的地（destination）。

訊息代理：當一個應用傳送訊息時，需要制定傳送的目的地，然後將訊息交給訊息代理（類似郵局），訊息代理會確保訊息傳送到指定的目的地。

目的地：不同的訊息系統有不同的訊息路由模式，但是有兩種通用的目的地：佇列（queue）和主題（topic），分別對應兩種訊息模型：點對點模型和釋出/訂閱模型

點對點模型：

佇列可以有多個接收者，但是訊息只能被一個接收者取走。

釋出-訂閱訊息模型：

主題裡的訊息可以傳送給多個訂閱者。

WebSockt實現瀏覽器和服務端通訊

WebSocket協議提供了通過套接字實現全雙工、非同步通訊的功能。首先，瀏覽器的JavaScript客戶端建立一個socket並連線到服務端，接下來，客戶端和服務端之間可以通過這個通道傳送和接收訊息，服務端可以通過這個連結傳送更新到客戶端。

通過Spring的WebSocketAPI實現

客戶端程式碼：

<html>
  <head>
    <title>Home</title>
    <script th:src="@{/webjars/sockjs-client/0.3.4/sockjs.min.js}"></script>
    <script th:src="@{/webjars/jquery/2.0.3/jquery.min.js}"></script>
  </head>
  <body>
    <button id="stop">Stop</button>
  
    <script th:inline="javascript">
      var sock = new SockJS([[@{/marco}]]);//SockJS是對WebSocket技術的一種模擬，在瀏覽器不支援WebSocket通訊時，
      提供其他的通訊方式。
      sock.onopen = function() {
    	  console.log('Opening');
    	  sayMarco();
      }
      
      sock.onmessage = function(e) {
    	  console.log('Received message: ', e.data);
    	  $('#output').append('Received "' + e.data + '"<br/>');
    	  setTimeout(function(){sayMarco()}, 2000);
      }
      
      sock.onclose = function() {
    	  console.log('Closing');
      }
      
      function sayMarco() {
    	  console.log('Sending Marco!');
    	  $('#output').append('Sending "Marco!"<br/>');
    	  sock.send("Marco!");
      }

      $('#stop').click(function() {sock.close()});
      </script>
    
    <div id="output"></div>
  </body>
</html>

上面程式碼中，sock建立的引數是/marco,這是一個路徑，代表該客服端sock連線到服務端的路徑是當前路徑加上這個相對路徑。而這個/marco其實對應的就是服務端的handler訊息處理器。

服務端程式碼：

public class MarcoHandler extends AbstractWebSocketHandler {

	private static final Logger logger = LoggerFactory.getLogger(MarcoHandler.class);
	//處理文字訊息
	@Override
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
		logger.info("Received message: " + message.getPayload());
		Thread.sleep(2000);
		session.sendMessage(new TextMessage("Polo!"));
	}
	
}

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

	@Override
	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		registry.addHandler(marcoHandler(), "/marco").withSockJS();
	}
  
	@Bean
	public MarcoHandler marcoHandler() {
		return new MarcoHandler();
	}

}

上面兩端程式碼中，@Configuration註解的是WebSocket的配置類。這個類指定了/marco對應的處理類，並且通過@Bean向Spring容器中注入了這個處理類。第一段程式碼則是MacroHandler類的實現，它繼承了AbstractWebSock抽象類，實現了處理訊息的方法。

總的來說，上述程式碼客戶端首先和一個服務端名為“/macro”的應用建立了連線。通過這條連線，客戶端給服務端傳送一條訊息“Macro”。服務端的handler會接收到這條訊息，並通過這條通道（WebSocketSession）傳送“polo”給客戶端。客戶端處理訊息的方法onmessage（）又會在接收到訊息後呼叫sayMarco（）。如此迴圈傳送訊息。這個傳送訊息的過程非同步的，也就是說客戶端給服務端傳送訊息後，不會等待服務端處理完成。所以說WebSocket建立的是一個非同步的全雙工的通訊通道。

通過Sping的STOMP協議實現訊息機制

直接使用WebSocket（或者SockJS）類似於用TCP套接字編寫Web應用。正如HTTP為TCP添加了請求相應模型，定義了傳送內容的語義一樣，STOMP協議定義在WEBSOCKET協議之上，為其定義了訊息的語義。

STOMP的訊息格式和HTTP請求或相應的結構類似：

SEND是命令，表示傳送內容，接下來是兩條頭資訊，destination是傳送訊息的目的地，content-length是負載大小。接下來一個空行，下面是負載內容，這裡是一個JSON字串。

前端程式碼：

<html>
  <head>
    <title>Home</title>
    <script th:src="@{/webjars/sockjs-client/0.3.4/sockjs.min.js}"></script>
    <script th:src="@{/webjars/stomp-websocket/2.3.0/stomp.min.js}"></script>
    <script th:src="@{/webjars/jquery/2.0.3/jquery.min.js}"></script>
  </head>
  <body>
    <button id="stop">Stop</button>
  
    <script th:inline="javascript">
      var sock = new SockJS([[@{/marcopolo}]]);
      var stomp = Stomp.over(sock);

      stomp.connect('guest', 'guest', function(frame) {
        console.log('*****  Connected  *****');
        
        stomp.subscribe("/topic/marco", handlePolo);
        sayMarco();
      });
      
      function handleOneTime(message) {
        console.log('Received: ', message);
      }

      function handlePolo(message) {
        console.log('Received: ', message);
        $('#output').append("<b>Received: " + 
            JSON.parse(message.body).message + "</b><br/>")
        if (JSON.parse(message.body).message === 'Polo!') {
          setTimeout(function(){sayMarco()}, 2000);
        }
      }
      
      function handleErrors(message) {
        console.log('RECEIVED ERROR: ', message);
        $('#output').append("<b>GOT AN ERROR!!!: " + 
            JSON.parse(message.body).message + "</b><br/>")
      }

      function sayMarco() {
        console.log('Sending Marco!');
        stomp.send("/app/marco", {}, 
            JSON.stringify({ 'message': 'Marco!' }));
        $('#output').append("<b>Send: Marco!</b><br/>")
      }

      $('#stop').click(function() {sock.close()});
      </script>
    
    <div id="output"></div>
  </body>
</html>

var sock = new SockJS([[@{/marcopolo}]]);

var stomp = Stomp.over(sock);

建立了到/marcopolo的WebSocket的連線之後，呼叫stomp.min.js庫的Stomp物件的over（）函式，在sock之上建立stomp客戶端，實際是封裝了SockJS。接下來建立stomp連線，訂閱一個目的地/topic/macro,並把接收道德訊息交給 handlepolo函式去處理。

服務端程式碼：

配置類：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketStompConfig extends AbstractWebSocketMessageBrokerConfigurer {

  @Override
  public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/marcopolo").withSockJS();
  }

  @Override
  public void configureMessageBroker(MessageBrokerRegistry registry) {
//    registry.enableStompBrokerRelay("/queue", "/topic");
    registry.enableSimpleBroker("/queue", "/topic");
    registry.setApplicationDestinationPrefixes("/app");
  }

controller：

@Controller
public class MarcoController {

  private static final Logger logger = LoggerFactory
      .getLogger(MarcoController.class);

  @MessageMapping("/marco")
  public Shout handleShout(Shout incoming) {
    logger.info("Received message: " + incoming.getMessage());

    try { Thread.sleep(2000); } catch (InterruptedException e) {}
    
    Shout outgoing = new Shout();
    outgoing.setMessage("Polo!");
    
    return outgoing;
  }

}

可以看到，與前端對應，配置類中註冊了endpoint：/marcopolo, 此外，在配置訊息代理的函式中，啟用了簡單代理，簡單代理會接收目的地字首為/topic和/queue的訊息，而目的地字首為/app的訊息不會交給代理，而是直接路由到帶有@MessageMapping註解的控制器方法中。這個方法的返回值會經過訊息代理髮送到目的地：

傳送訊息到客戶端

Spring提供了兩種方式傳送訊息到客戶端

作為處理訊息的附帶結果
使用訊息模板SimpleMessagingTemplate

上面的服務端程式碼就是講訊息作為附帶結果返回，返回的目的地是處理方法目的地預設是/macro加上一個/topic字首，也正是前端subscribe（）訂閱的目的地。另外還可以通過@sendTo註解來過載目的地，相應的前端要訂閱這個過載的目的地才能收到訊息。

SimpleMessagingTemplate可以在應用的任意地方傳送訊息，不用以接收一條訊息為前提，同時可以發給指定的使用者，基於SpringSecurity。

@Service
public class SpittleFeedServiceImpl implements SpittleFeedService {

	private SimpMessagingTemplate messaging;
	private Pattern pattern = Pattern.compile("\\@(\\S+)");
	
	@Autowired
	public SpittleFeedServiceImpl(SimpMessagingTemplate messaging) {
		this.messaging = messaging;
	}
	
	public void broadcastSpittle(Spittle spittle) {
		messaging.convertAndSend("/topic/spittlefeed", spittle);
		
		Matcher matcher = pattern.matcher(spittle.getMessage());
		if (matcher.find()) {
			String username = matcher.group(1);
			messaging.convertAndSendToUser(username, "/queue/notifications",
					new Notification("You just got mentioned!"));
		}
	}
	
}

通過WebSocket和STOMP實現瀏覽器和伺服器的訊息通訊

非同步訊息

WebSockt實現瀏覽器和服務端通訊

通過Spring的WebSocketAPI實現

通過Sping的STOMP協議實現訊息機制

傳送訊息到客戶端

通過WebSocket和STOMP實現瀏覽器和伺服器的訊息通訊

Spring boot:WebSocket+SockJS+Stomp實現廣播和點對點訊息傳送

第18章-使用WebSocket和STOMP實現消息功能

Spring 學習——基於Spring WebSocket 和STOMP實現簡單的聊天功能

Java後臺框架篇--spring websocket 和stomp實現訊息功能

第18章　使用WebSocket和 STOMP實現訊息功能

SocketLog-微信除錯、API除錯和AJAX的除錯的工具，能將日誌通過WebSocket輸出到Chrome瀏覽器的console中

使用spring websocket 和stomp實現訊息功能

spring 使用WebSocket 和 STOMP 實現訊息功能

libevent和libcurl實現http和https伺服器 cJSON使用

Android通過Runtime.getRuntime().exec實現Ping和Traceroute命令時readLine阻塞問題解決

Spring Websocket+SockJS+STOMP實現即時通訊（零）—— 要點

Spring Websocket+SockJS+STOMP 實現即時通訊（三）—— ChannelInterceptor與ExecutorChannelInterceptor

Spring Websocket+SockJS+STOMP 實現即時通訊（四）—— MessageChannel

用ReentrantLock和Condition實現生產者和消費者模式 wait、notify應用場景（生產者-消費者模式）

Spring Websocket+SockJS+STOMP 實現即時通訊（六）—— SubProtocolWebSocketHandler

Spring Websocket+SockJS+STOMP 實現即時通訊（四）—— MessageHandler

Spring Websocket+SockJS+STOMP 實現即時通訊（五）—— UserRegistryMessageHandler與NoOpMessageHandler

Android手機客戶端通過JSP實現與Tomcat伺服器端通訊（Msql資料庫，Json作為載體）--服務端程式碼

HashTable和HashMap實現原理和區別

通過WebSocket和STOMP實現瀏覽器和伺服器的訊息通訊

非同步訊息

WebSockt實現瀏覽器和服務端通訊

通過Spring的WebSocketAPI實現

通過Sping的STOMP協議實現訊息機制

傳送訊息到客戶端

相關推薦