1、websocket簡介

1.1、WebSocket 是什麼？

WebSocket 是一種網路通訊協議。RFC6455 定義了它的通訊標準。

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。

1.2、為什麼需要WebSocket？

HTTP 協議是一種無狀態的、無連線的、單向的應用層協議。它採用了請求/響應模型。通訊請求只能由客戶端發起，服務端對請求做出應答處理。

這種通訊模型有一個弊端：HTTP 協議無法實現伺服器主動向客戶端發起訊息。

這種單向請求的特點，註定瞭如果伺服器有連續的狀態變化，客戶端要獲知就非常麻煩。大多數 Web 應用程式將通過頻繁的非同步JavaScript和XML（AJAX）請求實現長輪詢。輪詢的效率低，非常浪費資源（因為必須不停連線，或者 HTTP 連線始終開啟）。

WebSocket 就是這樣發明的。WebSocket 連線允許客戶端和伺服器之間進行全雙工通訊，以便任一方都可以通過建立的連線將資料推送到另一端。WebSocket 只需要建立一次連線，就可以一直保持連線狀態。這相比於輪詢方式的不停建立連線顯然效率要大大提高。

2、構建工程

2.1、在pom中新增websocket的依賴

<!-- 引入 websocket 依賴類-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
 

2.2、建立請求訊息實體

package com.vesus.springbootwebsocket.model;

/**
 * @Description:
 * @Author: vesus
 * @CreateDate: 2018/5/28 下午5:46
 * @Version: 1.0
 */
public class RequestMessage {

    /***
     * 請求訊息
     */
    private String message ;

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}
 

2.3、建立響應訊息實體

package com.vesus.springbootwebsocket.model;

/**
 * @Description:
 * @Author: vesus
 * @CreateDate: 2018/5/28 下午5:47
 * @Version: 1.0
 */
public class ResponseMessage {

    /**
     * 響應訊息
     */
    private String message ;

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

2.4、配置訊息代理

package com.vesus.springbootwebsocket.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

/**
 * @Description:
 * @Author: vesus
 * @CreateDate: 2018/5/29 上午10:41
 * @Version: 1.0
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    /***
     * 註冊 Stomp的端點
     * addEndpoint：新增STOMP協議的端點。提供WebSocket或SockJS客戶端訪問的地址
     * withSockJS：使用SockJS協議
     * @param registry
     */
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/api/v1/socket")
                .setAllowedOrigins("*")//新增允許跨域訪問
                .withSockJS() ;
    }

    /**
     * 配置訊息代理
     * 啟動Broker，訊息的傳送的地址符合配置的字首來的訊息才傳送到這個broker
     */
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/api/v1/socket/send");//推送訊息字首
        registry.setApplicationDestinationPrefixes("/api/v1/socket/req");//應用請求字首
        registry.setUserDestinationPrefix("/user");//推送使用者字首
    }

}

2.5、控制器

package com.vesus.springbootwebsocket.controller;

import com.vesus.springbootwebsocket.model.RequestMessage;
import com.vesus.springbootwebsocket.model.ResponseMessage;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.Resource;

/**
 * @Description:
 * @Author: vesus
 * @CreateDate: 2018/5/29 下午1:48
 * @Version: 1.0
 */
@Controller
public class WebSocketController {

    @Resource
    private SimpMessagingTemplate messagingTemplate ;

    @RequestMapping("/index")
    public String index(){
        return "index";
    }

    @MessageMapping("/welcome")
    public ResponseMessage toTopic(RequestMessage msg) throws Exception
    {
        System.out.println("======================"+msg.getMessage());
        this.messagingTemplate.convertAndSend("/api/v1/socket/send",msg.getMessage());
        return new ResponseMessage("歡迎使用webScoket："+msg.getMessage());
    }

    @MessageMapping("/message")
    public ResponseMessage toUser(RequestMessage msg ) {
        System.out.println(msg.getMessage());
        this.messagingTemplate.convertAndSendToUser("123","/message",msg.getMessage());
        return new ResponseMessage("歡迎使用webScoket："+msg.getMessage());
    }
}

2.6、前端html

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>WebScoket廣播式</title>
    <script src="/sockjs.js"></script>
    <script src="/stomp.js"></script>
    <script src="/jquery.js"></script>
</head>
<body onload="disconnect()">
<button id="connect" onclick="connect()">連線</button>
<button id="disconnect" onclick="disconnect()" disabled="disabled">斷開連線</button><br/>
<div id="inputDiv">
    輸入名稱：<input type="text" id="name"/><br/>
    <button id="sendName" onclick="sendName()">傳送</button><br/>
    <p id="response"></p>
</div>
<script>
    var stompClient = null;
    //設定連線狀態控制顯示隱藏
    function setConnected(connected)
    {
        $("#connect").attr("disabled",connected);
        $("#disconnect").attr("disabled",!connected);
        if(!connected) {
            $("#inputDiv").hide();
        }else{
            $("#inputDiv").show();
        }
        $("#reponse").html("");
    }
    //連線
    function connect()
    {
        var socket = new SockJS("/api/v1/socket");
        stompClient = Stomp.over(socket);
        stompClient.connect({},function (frame) {
            setConnected(true);
            console.log("connected : "+frame);
            stompClient.subscribe("/api/v1/socket/send",function (response) {
                showResponse(JSON.parse(response.body));
            })
        })
    }
    //斷開連線
    function disconnect(){
        if(stompClient!=null)
        {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("disconnected!");
    }
    //傳送名稱到後臺
    function sendName(){
        var name = $("#name").val();
        stompClient.send("/api/v1/socket/req/message",{},JSON.stringify({'message':name}));
    }
    //顯示socket返回訊息內容
    function showResponse(message)
    {
        $("#response").html(message);
    }
</script>
</body>
</html>