websocket服務器推送

1.1 服務器推送

WebSocket作為一種通信協議，屬於服務器推送技術的一種，IE10+支持。

服務器推送技術不止一種，有短輪詢、長輪詢、WebSocket、Server-sent Events（SSE）等，他們各有優缺點：

#	短輪詢	長輪詢	Websocket	sse
通訊方式	http	http	基於TCP長連接通訊	http
觸發方式	輪詢	輪詢	事件	事件
優點	兼容性好容錯性強，實現簡單	比短輪詢節約資源	全雙工通訊協議，性能開銷小、安全性高，有一定可擴展性	實現簡便，開發成本低
缺點	安全性差，占較多的內存資源與請求數	安全性差，占較多的內存資源與請求數	傳輸數據需要進行二次解析，增加開發成本及難度	只適用高級瀏覽器
適用范圍	b/s服務	b/s服務	網絡游戲、銀行交互和支付	服務端到客戶端單向推送

短輪詢最簡單，在一些簡單的場景也會經常使用，就是隔一段時間就發起一個ajax請求。那么長輪詢是什么呢？

長輪詢(Long Polling)是在Ajax輪詢基礎上做的一些改進，在沒有更新的時候不再返回空響應，而且把連接保持到有更新的時候，客戶端向服務器發送Ajax請求，服務器接到請求后hold住連接，直到有新消息才返回響應信息並關閉連接，客戶端處理完響應信息后再向服務器發送新的請求。它是一個解決方案，但不是最佳的技術方案。

如果說短輪詢是客戶端不斷打電話問服務端有沒有消息，服務端回復后立刻掛斷，等待下次再打；長輪詢是客戶端一直打電話，服務端接到電話不掛斷，有消息的時候再回復客戶端並掛斷。

SSE(Server-Sent Events)與長輪詢機制類似，區別是每個連接不只發送一個消息。客戶端發送一個請求，服務端保持這個連接直到有新消息發送回客戶端，仍然保持着連接，這樣連接就可以支持消息的再次發送，由服務器單向發送給客戶端。然而IE直到11都不支持，不多說了....

1.2 WebSocket的特點

為什么已經有了輪詢還要WebSocket呢，是因為短輪詢和長輪詢有個缺陷：通信只能由客戶端發起。

那么如果后端想往前端推送消息需要前端去輪詢，不斷查詢后端是否有新消息，而輪詢的效率低且浪費資源（必須不停 setInterval 或 setTimeout 去連接，或者 HTTP 連接始終打開），WebSocket提供了一個文明優雅的全雙工通信方案。一般適合於對數據的實時性要求比較強的場景，如通信、股票、直播、共享桌面，特別適合於客戶端與服務頻繁交互的情況下，如聊天室、實時共享、多人協作等平台。

特點

1. 建立在 TCP 協議之上，服務器端的實現比較容易。
2. 與 HTTP 協議有着良好的兼容性。默認端口也是80和443，並且握手階段采用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。
3. 數據格式比較輕量，性能開銷小，通信高效。服務器與客戶端之間交換的標頭信息大概只有2字節;
4. 可以發送文本，也可以發送二進制數據。
5. 沒有同源限制，客戶端可以與任意服務器通信。
6. 協議標識符是ws（如果加密，則為wss），服務器網址就是 URL。ex：ws://example.com:80/some/path
7. 不用頻繁創建及銷毀TCP請求，減少網絡帶寬資源的占用，同時也節省服務器資源;
8. WebSocket是純事件驅動的，一旦連接建立，通過監聽事件可以處理到來的數據和改變的連接狀態，數據都以幀序列的形式傳輸。服務端發送數據后，消息和事件會異步到達。
9. 無超時處理。

HTTP與WS協議結構

WebSocket協議標識符用ws表示。`wss協議表示加密的WebSocket協議，對應HTTPs協議。結構如下：

• HTTP: TCP > HTTP
• HTTPS: TCP > TLS > HTTP
• WS: TCP > WS
• WSS: TCP > TLS > WS

以下是簡單代碼記錄，親測可用,基於springMVC的服務器推送技術websocket。

1.gradle構建，websocket引入的包："org.springframework:spring-websocket:4.2.4.RELEASE"

2.context.xml配置需要加的地方

xmlns:websocket="http://www.springframework.org/schema/websocket"

http://www.springframework.org/schema/websocket

http://www.springframework.org/schema/websocket/spring-websocket-4.1.xsd

3.websocket的配置類

 4.websocke接受消息以及處理的類

5.頁面js代碼

 

6.簡單的運行效果

 

 

 涉及到的代碼就這幾個，拷貝到springmvc項目里就可以。

package com.kitty.activity.common.websocket;

import org.springframework.stereotype.Service;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;

/**
 * Created by liuxn on 2018/5/22 0022.
 */
@Service
public class MyHandler extends TextWebSocketHandler {
    //在線用戶列表
    private static final Map<Integer, WebSocketSession> users;
    //用戶標識
    private static final String CLIENT_ID = "userId";

    static {
        users = new HashMap<>();
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("成功建立連接");
        Integer userId = getClientId(session);
        if (userId != null) {
            users.put(userId, session);
            session.sendMessage(new TextMessage("你已成功建立socket連接"));
            System.out.println(userId);
            System.out.println(session);
        }
    }

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) {
        // ...
        System.out.println("收到客戶端消息:"+message.getPayload());

        WebSocketMessage message1 = new TextMessage("server:"+message);
        try {
            session.sendMessage(message1);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        if (session.isOpen()) {
            session.close();
        }
        System.out.println("連接出錯");
        users.remove(getClientId(session));
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("連接已關閉：" + status);
        users.remove(getClientId(session));
    }

    /**
     * 發送信息給指定用戶
     * @param clientId
     * @param message
     * @return
     */
    public boolean sendMessageToUser(Integer clientId, TextMessage message) {
        if (users.get(clientId) == null) return false;
        WebSocketSession session = users.get(clientId);
        System.out.println("sendMessage:" + session+",msg:"+message.getPayload());
        if (!session.isOpen()) return false;
        try {
            session.sendMessage(message);
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }

    /**
     * 廣播信息
     * @param message
     * @return
     */
    public boolean sendMessageToAllUsers(TextMessage message) {
        boolean allSendSuccess = true;
        Set<Integer> clientIds = users.keySet();
        WebSocketSession session = null;
        for (Integer clientId : clientIds) {
            try {
                session = users.get(clientId);
                if (session.isOpen()) {
                    session.sendMessage(message);
                }
            } catch (IOException e) {
                e.printStackTrace();
                allSendSuccess = false;
            }
        }

        return  allSendSuccess;
    }

    @Override
    public boolean supportsPartialMessages() {
        return false;
    }

    /**
     * 獲取用戶標識
     * @param session
     * @return
     */
    private Integer getClientId(WebSocketSession session) {
        try {
            Integer clientId = (Integer) session.getAttributes().get(CLIENT_ID);
            return clientId;
        } catch (Exception e) {
            return null;
        }
    }
}

package com.kitty.activity.common.websocket;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.socket.TextMessage;

import javax.servlet.http.HttpSession;

 
@Controller
public class SocketController {

    @Autowired
    MyHandler handler;

    //玩家登錄
    @RequestMapping("/external/login/{userId}")
    public ModelAndView login(HttpSession session, @PathVariable("userId") Integer userId) {
        System.out.println("登錄接口,userId=" + userId);
        session.setAttribute("userId", userId);
        System.out.println(session.getAttribute("userId"));

        return new ModelAndView("phone/websocket_test");
    }

    //模擬給指定玩家發消息
    @RequestMapping("/external/message")
    @ResponseBody
    public String sendMessage(Integer userId,String message) {
        boolean hasSend = handler.sendMessageToUser(userId, new TextMessage(message));
        System.out.println(hasSend);
        return "success";
    }


    //模擬給所有玩家發消息
    @RequestMapping("/external/message/all")
    @ResponseBody
    public String sendAll(String message) {
        boolean hasSend = handler.sendMessageToAllUsers(new TextMessage(message));
        System.out.println(hasSend);
        return "success";
    }

}

package com.kitty.activity.common.websocket;

import org.springframework.context.annotation.Bean;
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(), "/external/myHandler").addInterceptors(new WebSocketInterceptor());
    }

    @Bean
    public WebSocketHandler myHandler() {
        return new MyHandler();
    }
}

package com.kitty.activity.common.websocket;

import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;

import javax.servlet.http.HttpSession;
import java.util.Map;

/**
 * 
 */
public class WebSocketInterceptor implements HandshakeInterceptor {

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler handler, Map<String, Object> map) throws Exception {
        if (request instanceof ServletServerHttpRequest) {
            System.out.println("*****beforeHandshake******");
            ServletServerHttpRequest serverHttpRequest = (ServletServerHttpRequest) request;
            HttpSession session = serverHttpRequest.getServletRequest().getSession();
//            Map parameterMap = serverHttpRequest.getServletRequest().getParameterMap();
//            System.out.println(parameterMap);
            if (session != null) {
                map.put("userId", session.getAttribute("userId"));
            }

        }
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {
        System.out.println("******afterHandshake******");
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="baseUrl" content="${ctx}"/>
    <meta name="roleId" content="${roleId}"/>
    <title>websocket</title>
    <script src="${ctx}/assets/js/jquery.min.js"></script>
    <script src="http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"></script>

</head>

<body>
<div class="act-outline" width="100%">
    it is work.
</div>
<script>
    //websocket
    $(function () {
        var baseUrl = $('meta[name="baseUrl"]').attr("content");
        //判斷當前瀏覽器是否支持WebSocket
        var websocket;
        if ('WebSocket' in window) {
            websocket = new WebSocket('ws://' + window.location.host + '/activity/external/myHandler');
            //      var ws = new WebSocket('ws://192.168.3.26:8999/activity/external/myHandler') //也可以指定ip
        } else if ('MozWebSocket' in window) {
            websocket = new MozWebSocket("ws://" + window.location.host + '/activity/external/myHandler'); //未測試
        } else {
            websocket = new SockJS("http://" + window.location.host + '/activity/external/myHandler'); //未測試
        }

        websocket.onopen = function () {
                    console.log("正在打開連接,准備發消息給服務器...");
            websocket.send("{text:hello}");
        }
        websocket.onclose = function () {
                    console.log("服務器關閉連接:onclose");
        }

        websocket.onmessage = function (msg) {
                    console.log("收到服務器推送數據:"+msg.data);
        }


    })
</script>
</body>
</html>

 備注：http://ip:port/activity 是項目根目錄。

參考鏈接地址：

https://blog.csdn.net/u014520745/article/details/62046396

https://www.cnblogs.com/interdrp/p/7903736.html