SpringBoot项目中使用WebSocket实现服务端推送消息
 
 
 
 
  之前了解过使用webSocket实现服务端消息推送，一直没有真正实践过，上周公司有一个后端新消息推送的业务需要处理，立即想到使用WebSocke做，由于项目大体结构采用SpringBoot+SpringSecurity+solr做的，看到网上有好多相关的示例不能满足需要，自己总结一波，关于webSocket的基本了解，请自行百度，本文重点贴出如何使用，以及业务处理。
 
 
一、使用场景
 
数据流状态： 比如说上传下载文件，文件进度，文件是否上传成功。
协同编辑文档： 同一份文档，编辑状态得同步到所有参与的用户界面上。
多玩家游戏： 很多游戏都是协同作战的，玩家的操作和状态肯定需要及时同步到所有玩家。
多人聊天： 很多场景下都需要多人参与讨论聊天，用户发送的消息得第一时间同步到所有用户。
社交订阅： 有时候我们需要及时收到订阅消息，比如说开奖通知，比如说在线邀请，支付结果等。
股票虚拟货币价格： 股票和虚拟货币的价格都是实时波动的，价格跟用户的操作息息相关，及时推送对用户跟盘有很大的帮助。
 
二、WebSocket与http区别
 
WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）
首先HTTP有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个HTTP请求合并为一个，但是 Websocket 其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，有交集，但是并不是全部。
另外Html5是指的一系列新的API，或者说新规范，新技术。
Websocket协议解决了服务器与客户端全双工通信的问题。
 
三、WebSocket与Socket区别
 
1.WebSocket:
 
 
  
websocket通讯的建立阶段是依赖于http协议的。最初的握手阶段是http协议，握手完成后就切换到websocket协议，并完全与http协议脱离了。
 
 
  
建立通讯时，也是由客户端主动发起连接请求，服务端被动监听。
 
 
  
通讯一旦建立连接后，通讯就是“全双工”模式了。也就是说服务端和客户端都能在任何时间自由得发送数据，非常适合服务端要主动推送实时数据的业务场景。
 
 
  
交互模式不再是“请求-应答”模式，完全由开发者自行设计通讯协议。
 
 
  
通信的数据是基于“帧(frame)”的，可以传输文本数据，也可以直接传输二进制数据，效率高。当然，开发者也就要考虑封包、拆包、编号等技术细节。
 
 
2.Socket:
 
 
  
服务端监听通讯，被动提供服务；客户端主动向服务端发起连接请求，建立起通讯。
 
 
  
每一次交互都是：客户端主动发起请求（request），服务端被动应答（response）。
 
 
  
服务端不能主动向客户端推送数据。
 
 
  
通信的数据是基于文本格式的。二进制数据（比如图片等）要利用base64等手段转换为文本后才能传输。
 
 
三、SpringBoot项目中使用WebSocket
 
导入依赖
 
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-websocket</artifactId>
			<version>4.3.8.RELEASE</version>
		</dependency>
 
新建WebSocket配置类
 
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer{
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry webSocketHandlerRegistry) {
        webSocketHandlerRegistry.addHandler(myHandler(),"/sendMessage/{ID}")
                .setAllowedOrigins("*")
                .addInterceptors(new WebSocketInterceptor());
    }
    private WebSocketServer myHandler(){
        return new WebSocketServer();
    }
}
 
新建WebSocket拦截器
 
public class WebSocketInterceptor implements HandshakeInterceptor{

    private final static Logger LOG= LoggerFactory.getLogger(WebSocketInterceptor.class);
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler webSocketHandler, Map<String, Object> map) throws Exception {
        if (request instanceof ServletServerHttpRequest) {
            String ID = request.getURI().toString().split("ID=")[1];
            if(LOG.isInfoEnabled()){
                LOG.info("当前session的ID="+ID);
            }
            ServletServerHttpRequest serverHttpRequest = (ServletServerHttpRequest) request;
            HttpSession session = serverHttpRequest.getServletRequest().getSession();
            map.put(Constant.WEBSOCKET_USERID,ID);
          }
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {
        if(LOG.isInfoEnabled()){
            LOG.info("webSocket拦截器的afterHandshake方法执行了");
        }
    }
}
 
新建WebSocket的Hanlder服务类
 
@Component
public class WebSocketServer implements WebSocketHandler{

    private final static Logger LOG= LoggerFactory.getLogger(WebSocketServer.class);

    /**
     * WebSocket不能注入(@Autowired),将要注入的service改成static
     *  原因：Spring管理的都是单例的，webSocket多对象冲突
     */
    private static WebSocketService webSocketService;
    @Autowired
    private void setWebSocketService(WebSocketService webSocketService){
        WebSocketServer.webSocketService=webSocketService;
    }

    /**
     * 成功建立连接，处理当前建立连接用户信息
     * @param session
     * @throws Exception
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        String ID=session.getUri().toString().split("ID=")[1];
        if(ID!=null){
            WebSocketUtils.electricSocketMap.put(ID,session);
        }
        if(LOG.isInfoEnabled()){
            LOG.info("[WebSocket成功建立连接] 当前在线人员"+WebSocketUtils.electricSocketMap.size()+"  当前建立连接人员id="+ID);
        }
        //建立连接后具体业务实现
        webSocketService.connDataProc(session.getUri().toString());
    }

    /**
     * 接收socket信息
     * @param session
     * @param webSocketMessage
     * @throws Exception
     */
    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> webSocketMessage) throws Exception {
        JSONObject jsonObject=JSONObject.fromObject(webSocketMessage.getPayload());
        //收到消息后具体业务实现
        webSocketService.receiveMessageProc(jsonObject);
    }
    /**
     * 连接出错
     * @param session
     * @param throwable
     * @throws Exception
     */
    @Override
    public void handleTransportError(WebSocketSession session, Throwable throwable) throws Exception {
        if(LOG.isErrorEnabled()){
            LOG.error("[webSocket连接发生错误]"+session.getId()+"出错信息"+throwable);
        }
        if(session.isOpen()){
            session.close();
        }
        WebSocketUtils.electricSocketMap.remove(WebSocketUtils.getClientId(session));
    }

    /**
     * 连接关闭之后的动作
     * @param webSocketSession
     * @param closeStatus
     * @throws Exception
     */
    @Override
    public void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus closeStatus) throws Exception {
        if(LOG.isDebugEnabled()){
            LOG.info("[WebSocket连接关闭]"+closeStatus);
        }
        WebSocketUtils.electricSocketMap.remove(WebSocketUtils.getClientId(webSocketSession));
    }

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


}
 
新建WebSocket的工具类
 
public class WebSocketUtils {
    private final static Logger LOG= LoggerFactory.getLogger(WebSocketUtils.class);

    /**
     *concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
     */
    public static Map<String, WebSocketSession> electricSocketMap;
    static {
        electricSocketMap=new ConcurrentHashMap<String, WebSocketSession>();
    }

    /**
     * 获取用户标识
     * @param session
     * @return
     */
    public static String getClientId(WebSocketSession session){
        String clientId = null;
        try{
            clientId= (String) session.getAttributes().get(Constant.WEBSOCKET_USERID);
        }catch (Exception e){

        }
        return clientId;
    }

    /**
     * 服务端主动推送：发送消息给指定的用户(一对一)
     * @param clientId
     * @param message
     * @return
     */
    public static boolean sendMessageToUser(String clientId, TextMessage message){
        if(WebSocketUtils.electricSocketMap.get(clientId)==null){
            return false;
        }
        WebSocketSession session=WebSocketUtils.electricSocketMap.get(clientId);
        if(!session.isOpen()){
            return false;
        }
        try {
            if(LOG.isInfoEnabled()){
                LOG.info("[服务端推送消息]:"+clientId+message);
            }
            synchronized (session){
                session.sendMessage(message);
            }
            return true;
        } catch (IOException e) {
            if(LOG.isErrorEnabled()){
                LOG.error("发送消息失败",e);
                return false;
            }
        }
        return true;
    }

    /**
     * 服务端主动推送：广播发送消息
     * @param message
     * @return
     */
    public static boolean sendMessageToAllUsers(TextMessage message){
        boolean allSendSuccess=true;
        Set<String> clientIds=WebSocketUtils.electricSocketMap.keySet();
        WebSocketSession session=null;
        for (String clientId : clientIds) {
            try{
                session=WebSocketUtils.electricSocketMap.get(clientId);
                if(session.isOpen()){
                    session.sendMessage(message);
                }
            }catch (Exception e){
                if(LOG.isErrorEnabled()){
                    LOG.error("群发消息失败"+clientId,e);
                    continue;
                }
            }
        }
        return allSendSuccess;
    }
}
 
新建WebSocket的业务处理服务接口
 
public interface WebSocketService {
    /**
     * 建立连接数据处理
     * @param uri
     */
    void connDataProc(String uri);

    /**
     * 发送数据后数据处理
     * @param jsonObject
     */
    void receiveMessageProc(JSONObject jsonObject);
}
 
新建WebSocket的业务处理实现类
 
@Service
public class WebSocketServiceImpl implements WebSocketService{

    @Override
    public void connDataProc(String uri) {
        String ID=uri.split("ID=")[1];
        WebSocketUtils.sendMessageToUser(ID,new TextMessage(ID+"已建立连接"));
    }
      /**
     * 接收socket发送的消息（业务处理）
     * @param jsonObject
     */
    @Override
    public void receiveMessageProc(JSONObject jsonObject) {
        //接收业务标识，根据业务标识判断所处理业务
        String business= (String) jsonObject.get("business");
        //具体业务处理不方便贴出，可根据自己需求定制业务。例如建立连接后每一个小时推送一次数据（使用线程处理，睡眠1个小时，关闭连接采用线程中断的方式）
          WebSocketUtils.sendMessageToUser(ID,new TextMessage("所要发送的数据"));
    }   
}

 
新建前端处理js
 
var lockReconnect=true;//避免ws重复连接
var websocket;
var closeWebSocket;
var send;
function webSocket(userId,postValue) {
    if(lockReconnect){
            if('WebSocket' in window){
                websocket = new WebSocket("ws://localhost:8080/sendMessage/ID="+userId);
            }else{
                alert("您的浏览器不支持websocket");
            }
    }else{
        send(postValue);
    }
    websocket.onerror = function(){
        setMessageInHtml("send error！"+userId);
    };
    websocket.onopen = function(){
        lockReconnect=false;
        //setMessageInHtml("connection success！"+userId)
        send(postValue);
    };
    websocket.onmessage  = function(event){
        webSocketAfter(event.data);
    };
    websocket.onclose = function(){
        lockReconnect=true;
        //setMessageInHtml("closed websocket!"+userId)
    };
    window.onbeforeunload = function(){
        closeWebSocket();
    };
    function setMessageInHtml(message){
        console.log(message);
    };
    /**
     * 建立连接后具体业务需求传参在send方法中写即可
     * 例如：
     *  var postValue={};
     *  var msg = document.getElementById('text').value+"000"+"&001";
     *  postValue.business="1";
     *  postValue.message=msg;
     */
     send=function send(postValue){
        if(websocket.readyState===1){
            websocket.send(JSON.stringify(postValue));
        }
    }
    closeWebSocket=function closeWebSocket() {
        if (websocket != null) {
            if(websocket.readyState!=3){
                var postValue = {};
                postValue.userId=userId;
                postValue.business = "0";
                send(postValue);
            }
        }
    }
 
至此本篇文章结束，有不懂的问题或者文中有错误的地方欢迎评论区留言。

WebSocket全双工通信与消息推送
 B/S结构的软件项目中有时客户端需要实时的获得服务器消息，但默认HTTP协议只支持请求响应模式，这样做可以简化web服务器，减少服务器的负担，加快响应速度，因为服务器不需要与客户端长时间建立一个通信链接，但不容易直接完成实时的消息推送功能，如聊天室、后台信息提示、实时更新数据等功能，但通过polling、Long polling、长链接以及HTML5中定义的WebSocket能完成该功能需要。
 
一、Socket简介
 Socket又称‘套接字‘，应用程序通常通过‘套接字‘向网络发出请求或者应答网络请求。Socket可以实现应用程序间网络通信。
 
Socket可以使用TCP／IP协议或者UDP协议
 TCP／IP协议
 TCP／IP协议是目前最为广泛的协议，是构成Internet国际互联网协议的最为基础的协议，由TCP和IP协议组成。
 TCP协议：是面向连接的，可靠的、基于字节流的传输层通信协议，负责数据的可靠性传输问题。
 IP协议：用于报文交换网络的一种面向数据的协议，主要负责给每台网络设备一个网络地址，保证数据传输到正确的目的地。
 UDP协议
 无连接、不可靠、基于报文的传输层协议，优点是发送后不用管，速度比TCP快。
 
二、WebSocket即简介与消息推送
 
B／S架构的系统多使用HTTP协议
 
HTTP协议的特点
 1无状态协议
 2用于通过Internet发送请求消息和响应消息
 3使用端口接收和发送消息，默认端口80
 
HTTP协议决定了服务器与客户端之间的连接方式，无法直接实现双向通信与消息推送，一些变相的解决办法：
 轮询polling：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。请求中大半是无用的，浪费带宽和服务器资源。
 长轮训Long polling：客户端定时向服务器发送Ajax请求，服务器接到请求后Hold住连接，直到有消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。在无消息的情况下不会频繁的请求，耗资少，但是服务器hold住连接会消耗资源，返回数据无保障。
 长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。 优点：消息即时到达，不发无用请求；管理起来也相对便。 缺点：服务器维护一个长连接会增加开销。 实例：Gmail聊天
 WebSocket：是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
 特点:
 事件驱动
 异步
 使用ws或者wss协议的客户端socket
 能够实现真正意义上的推送功能
 
缺点：
 少部分浏览器不支持，浏览器支持的程度与方式有区别。
 这里写图片描述
 
三、WebSocket客户端
 websocket允许通过JavaScript建立与远程服务器的连接，从而实现客户端与服务器间双向的通信。在websocket中有两个方法：
 1、send() 向远程服务器发送数据
 2、close() 关闭该websocket链接
 websocket同时还定义了几个监听函数
 1、onopen 当网络连接建立时触发该事件
 2、onerror 当网络发生错误时触发该事件
 3、onclose 当websocket被关闭时触发该事件
 4、onmessage 当websocket接收到服务器发来的消息的时触发的事件，也是通信中最重要的一个监听事件。msg.data
 websocket还定义了一个readyState属性，这个属性可以返回websocket所处的状态：
 1、CONNECTING(0) websocket正尝试与服务器建立连接
 2、OPEN(1) websocket与服务器已经建立连接
 3、CLOSING(2) websocket正在关闭与服务器的连接
 4、CLOSED(3) websocket已经关闭了与服务器的连接
 
websocket的使用
 websocket的url开头是ws，如果需要ssl加密可以使用wss，当我们调用websocket的构造方法构建一个websocket对象（new WebSocket(url)）的之后，就可以进行即时通信了。
 
前后台使用websocket实例
 
1前台实现
 
来源：http://www.cnblogs.com/likun10579/p/5594828.html
 
1 connect:function() {
 2         var webSocketIP = window.CRM_CONFIG.WebSocketIP;
 3         var target  = 'ws://'+webSocketIP+'/websocket';
 4         if ('WebSocket' in window) {
 5             ws = new WebSocket(target);
 6         } else if ('MozWebSocket' in window) {
 7             ws = new MozWebSocket(target);
 8         } else {
 9             return;
10         }
11         ws.onopen = function () {
12             console.log('Info: WebSocket connection opened.');
13             document.getElementById("wsMsg").style.display = "block";
14         };
15         var self = this;
16         ws.onmessage = function (event) {
17             if('您有如下工单需要及时处理：'!= event.data) {
18                  self.setState({wsMessage: event.data})
19                  document.getElementById("wsMsg").style.display = "block";
20             }else{
21                  document.getElementById("wsMsg").style.display = "none";
22             }
23         };
24 
25    <div id="wsMsg" className="msgDialog msgDiv">
26                     <div className="msgContent"  ><a onClick ={this.closeMsg}> X&nbsp;</a></div>
27                     {this.state.wsMessage}
28                 </div>
 
后台实现
 2、pom.xml依赖
 
 1     <!--spring-websocket-->
 2         <dependency>
 3             <groupId>javax.servlet</groupId>
 4             <artifactId>javax.servlet-api</artifactId>
 5             <version>3.1.0</version>
 6         </dependency>
 7         <dependency>
 8             <groupId>org.springframework</groupId>
 9             <artifactId>spring-websocket</artifactId>
10             <version>${spring.version}</version>
11         </dependency>
 
3、spring.xml配置
 
 
<bean id="websocket" class="com.oasis.crm.controller.websocket.WebsocketEndPoint"/>
<websocket:handlers  allowed-origins="*">
    <websocket:mapping path="/websocket" handler="websocket"/>
    <websocket:handshake-interceptors>
        <bean class="com.oasis.crm.controller.websocket.HandshakeInterceptor"/>
    </websocket:handshake-interceptors>
</websocket:handlers>
 
4、java代码
 
package com.oasis.crm.controller.websocket;
import com.oasis.crm.dao.biz.user.UserDao;
import com.oasis.crm.model.biz.user.User;
import com.oasis.crm.service.biz.order.AcceptedWorkOrderService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.util.Timer;
import java.util.TimerTask;


/**
 * 推送即将要处理完成的受理单给处理人
 */
@RequestMapping("/websocket")
public class WebsocketEndPoint extends TextWebSocketHandler {

    @Autowired
    private AcceptedWorkOrderService acceptedWorkOrderService;

    @Autowired
    private UserDao userDao;

    private Timer timer;

    @Override
    protected void handleTextMessage(WebSocketSession session,
                                     TextMessage message) throws Exception {
        if(!session.isOpen()){
            timer.cancel();
            return;
        }
        super.handleTextMessage(session, message);
        session.sendMessage(message);
    }
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        String loginUserName = session.getPrincipal().getName();
        User user = userDao.findUserByLoginName(loginUserName);
        timer = new Timer(true);
        long delay = 0;
        OrderTimeTask orderTimeTask = new OrderTimeTask(user,session);
        timer.schedule(orderTimeTask,delay, 60000);// 设定指定的时间time,此处为1分钟
    }


    class OrderTimeTask extends TimerTask{
        private User user;
        private WebSocketSession session;

        public OrderTimeTask(User user,WebSocketSession session){
            this.user = user;
            this.session = session;
        }

        @Override
        public void run() {
            try {
                String reminder = acceptedWorkOrderService.getLastReminderOrder(user.getId());
                TextMessage textMessage = new TextMessage(reminder);
                handleMessage(session,textMessage);
            } catch (Exception e){
                e.printStackTrace();
            }

        }
    }
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("Connection Closed！");
    }


}

    
 /**
 * 自定义的拦截器
 */
    package com.oasis.crm.controller.websocket;
    
    import org.springframework.http.server.ServerHttpRequest;
    import org.springframework.http.server.ServerHttpResponse;
    import org.springframework.web.socket.WebSocketHandler;
    import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;
    
    import java.util.Map;
    
    
    public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor {
        
        @Override
        public boolean beforeHandshake(ServerHttpRequest request,
                ServerHttpResponse response, WebSocketHandler wsHandler,
                Map<String, Object> attributes) throws Exception {
            return super.beforeHandshake(request, response, wsHandler, attributes);
        }
    
        @Override
        public void afterHandshake(ServerHttpRequest request,
                ServerHttpResponse response, WebSocketHandler wsHandler,
                Exception ex) {
            super.afterHandshake(request, response, wsHandler, ex);
        }
    }
 
前端通过pull方式拉取数据代码
 
    setInterval(()=> {
            this.getReminders();
        }, 300000);

 getReminders(){
        $.getJSON(Remote.acceptedWorkOrder.reminderOrders,packVo=>{
            this.setState({
                wsMessage:packVo.vo
            });
        });
        if('您有如下工单需要及时处理：'!= this.state.wsMessage&&''!=this.state.wsMessage){
            document.getElementById("wsMsg").style.display = "block";
        }else{
            document.getElementById("wsMsg").style.display = "none";
        }
    }
 
总结
 没有其他能像 WebSocket 一样实现双向通信的技术了，迄今为止，大部分开发者还是使用 Ajax 轮询来实现，但这是个不太优雅的解决办法，WebSocket 虽然用的人不多，可能是因为协议刚出来的时候有安全性的问题以及兼容的浏览器比较少，但现在都有解决。如果你有这些需求可以考虑使用 WebSocket：
 
1 、多个用户之间进行交互；
 
2、需要频繁地向服务端请求更新数据。
 
比如弹幕、消息订阅、多玩家游戏、协同编辑、股票基金实时报价、视频会议、在线教育等需要高实时的场景。
 
参考文章
 
这三篇分别是原理和场景上深度解析websocket的好文
 
1、一文读懂 WebSocket 通信过程与实现
 https://blog.csdn.net/zhusongziye/article/details/80316127
 
2、Websocket：看完让你彻底搞懂Websocket原理 即时消息通讯
 https://blog.csdn.net/qq_38047600/article/details/80024696
 
3、websocket可以是纯Java实现，也可以整合Maven工程SSM框架实现，前端都是html或jsp的网页进行websocket使用与实现。
 https://blog.csdn.net/qq_38047600/article/details/80024696

 
 
开发中经常会有这样的使用场景.如某个用户在一个数据上做了xx操作, 与该数据相关的用户在线上的话,需要实时接收到一条信息.
 
 
这种可以使用WebSocket来实现. 另外,对于消息,可以定义一个类进行固化. 主要是消息内容,接收人,发送人,是否已发送等. 用户上线时, 通过方法去查询出来然后进行发送
 
 
 
 
 
 
  
@ServerEndpoint(value = "/websocket/{sessionId}")
public class MyWebSocket {

//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static AtomicInteger onlineCount = new AtomicInteger(0);

//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
public static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();

//与某个客户端的连接会话，需要通过它来给客户端发送数据
public Session session;

/**
* 连接建立成功调用的方法
*
* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
@OnOpen
public void onOpen(Session session) {
this.session = session;
if (webSocketSet.add(this)) {
System.out.println("有新连接加入！当前在线人数为" + onlineCount.incrementAndGet());
}
}

/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
if (webSocketSet.remove(this)) {
System.out.println("有一连接关闭！当前在线人数为" + onlineCount.decrementAndGet());
}
}

/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
* @param session 可选的参数
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("来自客户端的消息:" + message);
//群发消息
/* for(MyWebSocket item: webSocketSet){
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}*/
}

/**
* 发生错误时调用
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
System.out.println("发生错误");
error.printStackTrace();
}
private static ReentrantLock lock = new ReentrantLock(true);
/**
* 该方法是我们根据业务需要调用的.
*
* @param message
* @throws IOException
*/
public void sendMessage(String message) throws IOException {
synchronized(this.session) {
if (session.isOpen()) {
this.session.getAsyncRemote().sendText(message);
}
}
}

}
 
 
 
 
 
 
 

页面中的调用.每个客户都要初始化一个websocket示例. 其中我们用用户的userId作为标识的一部分.
 
 
 
  
//页面加载完成. 初始化一个webSocket对象.然后可以根据需要调一个来发信息
window.onload = function () {
initWebSocket();
setTimeout(function(){
$.post('<%=basePath %>xxx.do',function(r){
//alert(0);
});
},2000);
};


function initWebSocket() {
webSocket = new WebSocket(requestUrl.replace("http", "ws")
+ 'websocket/${userId}');

webSocket.onerror = function (event) {
onError(event)
};
//连接建立成功事件
webSocket.onopen = function (event) {
onOpen(event)
};
//接收到服务端消息事件
webSocket.onmessage = function (event) {
onMessage(event)
};
}
 
 
 
 
 
 
 

 
--------------------- 
作者：Wing_gor 
来源：CSDN 
原文：https://blog.csdn.net/qq_40085888/article/details/86308612
 
 
----------------------------------------------------------------------------------------------------------
 
 
webSocket与html区别，以及服务端与客户端消息通讯利用webSocket
 
 
 
 
 
作者：Ovear
链接：https://www.zhihu.com/question/20215561/answer/40316953
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 
 

  一、WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）
  
首先HTTP有1.1和1.0之说，也就是所谓的keep-alive，把多个HTTP请求合并为一个，但是Websocket其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充可以通过这样一张图理解
  
&amp;amp;lt;img src=&quot;https://pic1.zhimg.com/6651f2f811ec133b0e6d7e6d0e194b4c_b.jpg&quot; data-rawwidth=&quot;374&quot; data-rawheight=&quot;133&quot; class=&quot;content_image&quot; width=&quot;374&quot;&amp;amp;gt;有交集，但是并不是全部。
   
  
有交集，但是并不是全部。
另外Html5是指的一系列新的API，或者说新规范，新技术。Http协议本身只有1.0和1.1，而且跟Html本身没有直接关系。。
通俗来说，你可以用HTTP协议传输非Html数据，就是这样=。=
再简单来说，层级不一样。
 
  
二、Websocket是什么样的协议，具体有什么优点
首先，Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。
简单的举个例子吧，用目前应用比较广泛的PHP生命周期来解释。
1) HTTP的生命周期通过Request来界定，也就是一个Request 一个Response，那么在HTTP1.0中，这次HTTP请求就结束了。
在HTTP1.1中进行了改进，使得有一个keep-alive，也就是说，在一个HTTP连接中，可以发送多个Request，接收多个Response。
但是请记住 Request = Response ， 在HTTP中永远是这样，也就是说一个request只能有一个response。而且这个response也是被动的，不能主动发起。
 教练，你BB了这么多，跟Websocket有什么关系呢？
  
_(:з」∠)_好吧，我正准备说Websocket呢。。
  
首先Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手。
  
在握手阶段是一样的
  
-------以下涉及专业技术内容，不想看的可以跳过lol:，或者只看加黑内容--------
  
首先我们来看个典型的Websocket握手（借用Wikipedia的。。）
  
 
  
 
   
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
 
  
 熟悉HTTP的童鞋可能发现了，这段类似HTTP协议的握手请求中，多了几个东西。
  
我会顺便讲解下作用。
  
 
  
 
   
Upgrade: websocket
Connection: Upgrade
 
  
 这个就是Websocket的核心了，告诉Apache、Nginx等服务器：注意啦，窝发起的是Websocket协议，快点帮我找到对应的助理处理~不是那个老土的HTTP。
  
 
  
 
   
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
 
  
 
  
首先，Sec-WebSocket-Key 是一个Base64 encode的值，这个是浏览器随机生成的，告诉服务器：泥煤，不要忽悠窝，我要验证尼是不是真的是Websocket助理。
然后，Sec_WebSocket-Protocol 是一个用户定义的字符串，用来区分同URL下，不同的服务所需要的协议。简单理解：今晚我要服务A，别搞错啦~
最后，Sec-WebSocket-Version 是告诉服务器所使用的Websocket Draft（协议版本），在最初的时候，Websocket协议还在 Draft 阶段，各种奇奇怪怪的协议都有，而且还有很多期奇奇怪怪不同的东西，什么Firefox和Chrome用的不是一个版本之类的，当初Websocket协议太多可是一个大难题。。不过现在还好，已经定下来啦~大家都使用的一个东西~ 脱水：服务员，我要的是13岁的噢→_→
 然后服务器会返回下列东西，表示已经接受到请求， 成功建立Websocket啦！
  
 
  
 
   
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
 
  
 这里开始就是HTTP最后负责的区域了，告诉客户，我已经成功切换协议啦~
  
 
  
 
   
Upgrade: websocket
Connection: Upgrade
 
  
 
  
依然是固定的，告诉客户端即将升级的是Websocket协议，而不是mozillasocket，lurnarsocket或者shitsocket。
然后，Sec-WebSocket-Accept 这个则是经过服务器确认，并且加密过后的 Sec-WebSocket-Key。服务器：好啦好啦，知道啦，给你看我的ID CARD来证明行了吧。。
后面的，Sec-WebSocket-Protocol 则是表示最终使用的协议。
 
  
至此，HTTP已经完成它所有工作了，接下来就是完全按照Websocket协议进行了。
具体的协议就不在这阐述了。
------------------技术解析部分完毕------------------
 &amp;amp;lt;img src=&quot;https://pic2.zhimg.com/afe119b52e096016139edabc2dfa9661_b.jpg&quot; data-rawwidth=&quot;161&quot; data-rawheight=&quot;187&quot; class=&quot;content_image&quot; width=&quot;161&quot;&amp;amp;gt;你TMD又BBB了这么久，那到底Websocket有什么鬼用，http long poll，或者ajax轮询不都可以实现实时信息传递么。你TMD又BBB了这么久，那到底Websocket有什么鬼用，http long poll，或者ajax轮询不都可以实现实时信息传递么。
  
&amp;amp;lt;img src=&quot;https://pic1.zhimg.com/20110e661edb1e93755a99c1d826e264_b.jpg&quot; data-rawwidth=&quot;176&quot; data-rawheight=&quot;193&quot; class=&quot;content_image&quot; width=&quot;176&quot;&amp;amp;gt;
  
  

  
好好好，年轻人，那我们来讲一讲Websocket有什么用。
  
来给你吃点胡（苏）萝（丹）卜（红）
  
&amp;amp;lt;img src=&quot;https://pic4.zhimg.com/31ddf0cfbeecef21568d85ca60b5f1ff_b.jpg&quot; data-rawwidth=&quot;53&quot; data-rawheight=&quot;65&quot; class=&quot;content_image&quot; width=&quot;53&quot;&amp;amp;gt;
   
  
三、Websocket的作用
在讲Websocket之前，我就顺带着讲下 long poll 和 ajax轮询 的原理。
首先是 ajax轮询 ，ajax轮询 的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。
场景再现：
客户端：啦啦啦，有没有新信息(Request)
服务端：没有（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：没有。。（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：你好烦啊，没有啊。。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：好啦好啦，有啦给你。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：。。。。。没。。。。没。。。没有（Response） ---- loop
 
  
long poll 
long poll 其实原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。
场景再现
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request）
服务端：额。。 等待到有消息的时候。。来 给你（Response）
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request） -loop
 
  
从上面可以看出其实这两种方式，都是在不断地建立HTTP连接，然后等待服务端处理，可以体现HTTP协议的另外一个特点，被动性。
何为被动性呢，其实就是，服务端不能主动联系客户端，只能有客户端发起。
简单地说就是，服务器是一个很懒的冰箱（这是个梗）（不会、不能主动发起连接），但是上司有命令，如果有客户来，不管多么累都要好好接待。
 
  
说完这个，我们再来说一说上面的缺陷（原谅我废话这么多吧OAQ）
从上面很容易看出来，不管怎么样，上面这两种都是非常消耗资源的。
ajax轮询 需要服务器有很快的处理速度和资源。（速度）
long poll 需要有很高的并发，也就是说同时接待客户的能力。（场地大小）
所以ajax轮询 和long poll 都有可能发生这种情况。
 客户端：啦啦啦啦，有新信息么？
  
服务端：月线正忙，请稍后再试（503 Server Unavailable）
  
客户端：。。。。好吧，啦啦啦，有新信息么？
  
服务端：月线正忙，请稍后再试（503 Server Unavailable）
  

  
客户端：&amp;amp;lt;img src=&quot;https://pic1.zhimg.com/7c0cf075c7ee4cc6cf52f4572a4c1c10_b.jpg&quot; data-rawwidth=&quot;143&quot; data-rawheight=&quot;50&quot; class=&quot;content_image&quot; width=&quot;143&quot;&amp;amp;gt;
  
  
 
  
然后服务端在一旁忙的要死：冰箱，我要更多的冰箱！更多。。更多。。（我错了。。这又是梗。。）
 
  
--------------------------
言归正传，我们来说Websocket吧
通过上面这个例子，我们可以看出，这两种方式都不是最好的方式，需要很多资源。
一种需要更快的速度，一种需要更多的'电话'。这两种都会导致'电话'的需求越来越高。
哦对了，忘记说了HTTP还是一个无状态协议。（感谢评论区的各位指出OAQ）
通俗的说就是，服务器因为每天要接待太多客户了，是个健忘鬼，你一挂电话，他就把你的东西全忘光了，把你的东西全丢掉了。你第二次还得再告诉服务器一遍。
 
  
所以在这种情况下出现了，Websocket出现了。
他解决了HTTP的这几个难题。
首先，被动性，当服务器完成协议升级后（HTTP->Websocket），服务端就可以主动推送信息给客户端啦。
所以上面的情景可以做如下修改。
客户端：啦啦啦，我要建立Websocket协议，需要的服务：chat，Websocket协议版本：17（HTTP Request）
服务端：ok，确认，已升级为Websocket协议（HTTP Protocols Switched）
客户端：麻烦你有信息的时候推送给我噢。。
服务端：ok，有的时候会告诉你的。
服务端：balabalabalabala
服务端：balabalabalabala
服务端：哈哈哈哈哈啊哈哈哈哈
服务端：笑死我了哈哈哈哈哈哈哈
 
  
就变成了这样，只需要经过一次HTTP请求，就可以做到源源不断的信息传送了。（在程序设计中，这种设计叫做回调，即：你有信息了再来通知我，而不是我傻乎乎的每次跑来问你）
这样的协议解决了上面同步有延迟，而且还非常消耗资源的这种情况。
那么为什么他会解决服务器上消耗资源的问题呢？
其实我们所用的程序是要经过两层代理的，即HTTP协议在Nginx等服务器的解析下，然后再传送给相应的Handler（PHP等）来处理。
简单地说，我们有一个非常快速的接线员（Nginx），他负责把问题转交给相应的客服（Handler）。
本身接线员基本上速度是足够的，但是每次都卡在客服（Handler）了，老有客服处理速度太慢。，导致客服不够。
Websocket就解决了这样一个难题，建立后，可以直接跟接线员建立持久连接，有信息的时候客服想办法通知接线员，然后接线员在统一转交给客户。
这样就可以解决客服处理速度过慢的问题了。
 同时，在传统的方式上，要不断的建立，关闭HTTP协议，由于HTTP是非状态性的，每次都要重新传输identity info（鉴别信息），来告诉服务端你是谁。
  
虽然接线员很快速，但是每次都要听这么一堆，效率也会有所下降的，同时还得不断把这些信息转交给客服，不但浪费客服的处理时间，而且还会在网路传输中消耗过多的流量/时间。
  
但是Websocket只需要一次HTTP握手，所以说整个通讯过程是建立在一次连接/状态中，也就避免了HTTP的非状态性，服务端会一直知道你的信息，直到你关闭请求，这样就解决了接线员要反复解析HTTP协议，还要查看identity info的信息。
  
同时由客户主动询问，转换为服务器（推送）有信息的时候就发送（当然客户端还是等主动发送信息过来的。。），没有信息的时候就交给接线员（Nginx），不需要占用本身速度就慢的客服（Handler）了
  
--------------------
  
至于怎么在不支持Websocket的客户端上使用Websocket。。答案是：不能
  
但是可以通过上面说的 long poll 和 ajax 轮询来 模拟出类似的效果
  
-----
  
_(:з」∠)_两天写了两篇科普类文章。。好累OAQ，求赞。。
  
对啦，如果有错误，欢迎大家在底下留言指出噢~
 
 
 

   
 
 
 

  https://blog.csdn.net/seapeak007/article/details/71086974
 
 
 

   
 
 
 

  ---------------------------------------------------------------------------------------------------------------------
 
 
 
 
  
WebSocket原理及如何使用
 
  
它有很多名字; WebSocket，WebSocket协议和WebSocket API。从首选的消息传递应用程序到流行的在线多人游戏，WebSocket在当今最常用的Web应用程序中是至关重要的。
 
  
 
 
  
根据定义，WebSocket是通过单个TCP连接提供全双工（双向通信）通信信道的计算机通信协议。此WebSocket API可在用户的浏览器和服务器之间进行双向通信。用户可以向服务器发送消息并接收事件驱动的响应，而无需轮询服务器。 它可以让多个用户连接到同一个实时服务器，并通过API进行通信并立即获得响应。
 
  

   
  
 
  
WebSockets允许用户和服务器之间的流连接，并允许即时信息交换。在聊天应用程序的示例中，通过套接字汇集消息，可以实时与一个或多个用户交换，具体取决于谁在服务器上“监听”（连接）。
 
  
 
 
  
WebSockets不仅限于聊天/消息传递应用程序。它们适用于需要实时更新和即时信息交换的任何应用程序。一些示例包括但不限于：现场体育更新，股票行情，多人游戏，聊天应用，社交媒体等等。
 
  
 
 
  
WebSockets还会考虑代理和防火墙等危险，使得任何连接都可以进行流式传输。它支持单个连接的上游和下游通信。 它还减轻了服务器的负担，允许现有机器支持同时连接。
 
  
 
 
  
这是现代Web应用程序中的示例实现WebSockets。在下面的示例中，我使用WebSockets作为带有Rails 5 API后端和React.js前端的即时消息应用程序。这绝不是一个指南，而是一个如何使用它的例子。我使用了Action Cable，它是Rails的包装器，可以无缝地集成Ruby中WebSockets的主要功能，并允许在整个域模型中轻松实现。 它内置于Rails 5.2中，因此无需安装/执行任何外部库或gem。
 
  
 
 
  
它的工作原理是Pub-Sub（发布和订阅）。它适用于发送者将数据（发布者）发送给抽象数量的收件人（订阅者），而无需指定他们是谁。
 
  
 
 
  
第一步是将服务器挂载到路由文件中，这样前端就可以从流中得到endpoint：
 
  

   
  
 
  
在第5行，我设置了ActionCable服务器端点
 
  
 
 
  
下一步是在后端创建一个通道，以便在实时创建消息时对消息进行流式处理。
 
  

   
  
 
  
这是管理消息创建以及广播消息的消息通道
 
  
 
 
  
这里我们有两种方法，订阅和接收。订阅的第一种方法允许将消息通道流式传输到连接的用户或订户。 接收的第二种方法管理消息创建和广播消息。我实现了JWT用户身份验证，以便可以将消息追溯到用户，只有具有有效用户帐户的消息才能创建消息。
 
  
 
 
  
对于我的应用程序的前端，我使用它们npm package actioncable从客户端到服务器端连接到WebSocket API。 这个包直接来自于Rails的团队。 使用此库，我实例化了一个cableApp实例，并将其作为props传递给需要访问WebSocket连接的组件。
 
  

   
  
 
  
导入actionCable并创建了一个cableApp实例，然后将cableApp连接到我的后端端点“/ cable”并将其传递给需要连接的组件
 
  
 
 
  
然后，我通过React.js生命周期方法componentDidMount（）连接到WebSocket的连接，并在每次将组件安装到DOM时建立连接。
 
  

   
  
 
  
在componentDidMount（）中，我建立了客户端以连接到WebSocket协议，该协议从我的Rails API中的“messagesChannel”流式传输。
 
  
 
 
  
现在，每次创建消息并将其发送到接收方法时，订阅（d）用户将立即接收并能够实时查看消息。此实现支持订阅同一频道的多个用户。因此，如果多个用户签名并订阅了相同的频道，他们可以发送所有订阅者都能看到的消息以及从其他订阅者接收消息。当然，你可以限制为两个人，并使它成为p2p，但是那样还有什么乐趣呢？
 
  
 
 
  
我希望通过阅读本文，可以看到WebSockets的潜力。它使自己成为一个宝贵的资源，在这个时代，信息交换需要很快完成。 希望读者将在自己的项目中实现它们。
 
  
译者：张春
 
  
原文地址：
 
  
https://medium.com/@jamesjacobthomas7/websockets-and-how-i-used-them-a-quick-glance-37899b697852
 
 
 
 
 
 

Title: spring + websocket 实现服务端推送消息（附几个坑）
 
背景
 
原先采用ajax轮询的方式，去更新推送信息。但是如果你目标的数据对于一次请求来说，只是一个很小的值，那采用轮询的方式就会很浪费带宽。
 
现在尝试用websocket实现产生推送信息时实时推送给前端。
 
Spring 4.0的一个最大更新是增加了websocket的支持。websocket提供了一个在web应用中的高效、双向的通讯，需要考虑到客户端（浏览器）和服务器之间的高频和低延时消息交换。一般的应用场景有：在线交易、游戏、协作、数据可视化等。
 
使用websocket需要考虑的浏览器的支持（IE<10不支持），目前主流的浏览器都能很好的支持websocket。
 
websocket协议中有一些子协议，可以从更高的层次实现编程模型，就像我们使用HTTP而不是TCP一样。这些子协议有STOMP,WAMP等。
 
基础知识
 
websocket与http
 
WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）
 
首先HTTP有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个HTTP请求合并为一个，但是 Websocket 其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充。
 
有交集，但是并不是全部。
 
另外Html5是指的一系列新的API，或者说新规范，新技术。Http协议本身只有1.0和1.1，而且跟Html本身没有直接关系，通俗来说，你可以用HTTP协议传输非Html数据。
 
websocket
 
HTTP的生命周期通过 Request 来界定，也就是一个 Request 一个 Response ，那么在 HTTP1.0 中，这次HTTP请求就结束了。
 
在HTTP1.1中进行了改进，使得有一个keep-alive，也就是说，在一个HTTP连接中，可以发送多个Request，接收多个Response。但是请记住 Request = Response ， 在HTTP中永远是这样，也就是说一个request只能有一个response。而且这个response也是被动的，不能主动发起。
 
说了这么多，再来看下websocket。
 
首先Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手。
 
首先我们来看个典型的 Websocket 握手（借用Wikipedia的。。）
 
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
 
熟悉HTTP的童鞋可能发现了，这段类似HTTP协议的握手请求中，多了几个东西。我会顺便讲解下作用。
 
Upgrade: websocket
Connection: Upgrade
 
这个就是Websocket的核心了，告诉 Apache 、 Nginx 等服务器：注意啦，我发起的是Websocket协议，快点帮我找到对应的助理处理~不是那个老土的HTTP。
 
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
 
首先，Sec-WebSocket-Key 是一个 Base64 encode 的值，这个是浏览器随机生成的，告诉服务器：泥煤，不要忽悠窝，我要验证尼是不是真的是Websocket助理。
 
然后，Sec_WebSocket-Protocol 是一个用户定义的字符串，用来区分同URL下，不同的服务所需要的协议。简单理解：今晚我要服务A，别搞错啦~
 
最后， Sec-WebSocket-Version 是告诉服务器所使用的 Websocket Draft（协议版本），在最初的时候，Websocket协议还在 Draft 阶段，各种奇奇怪怪的协议都有，而且还有很多期奇奇怪怪不同的东西，什么Firefox和Chrome用的不是一个版本之类的，当初Websocket协议太多可是一个大难题。。不过现在还好，已经定下来啦~大家都使用的一个东西。
 
然后服务器会返回下列东西，表示已经接受到请求，成功建立Websocket啦！
 
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
 
这里开始就是HTTP最后负责的区域了，告诉客户，我已经成功切换协议啦~
 
`Upgrade: websocket
Connection: Upgrade`
 
依然是固定的，告诉客户端即将升级的是 Websocket 协议，而不是mozillasocket，lurnarsocket或者shitsocket。
 
然后， Sec-WebSocket-Accept这个则是经过服务器确认，并且加密过后的 Sec-WebSocket-Key。 服务器：好啦好啦，知道啦，给你看我的ID CARD来证明行了吧。。
 
后面的， Sec-WebSocket-Protocol 则是表示最终使用的协议。
 
至此，HTTP已经完成它所有工作了，接下来就是完全按照Websocket协议进行了。具体的协议就不在这阐述了。
 
实战
 
服务端
 
maven 配置
 
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-messaging</artifactId>
            <version>4.0.5.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>4.0.5.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.0.5.RELEASE</version>
        </dependency>
 
拦截器实现
 
/**
 * @Author: Richard_yyf
 * @Description:
 * @Date: Created in 15:28 2018/2/24
 */
public class MyInterceptor implements HandshakeInterceptor {

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response,
                                   WebSocketHandler webSocketHandler, Map<String, Object> attributes) throws Exception {
        if (request instanceof ServletServerHttpRequest) {
            // 获取请求参数，首先我们要获取HttpServletRequest对象才能获取请求参数；当ServerHttpRequset的层次结构打开后其子类可以获取到我们想要的http对象，那么就简单了。
            // 我这里是把获取的请求数据绑定到session的map对象中（attributes）
            HttpServletRequest servletRequest = ((ServletServerHttpRequest) request).getServletRequest();
            // 标记用户
            String uid = servletRequest.getParameter("uid");
            attributes.put("uid", uid);
            if(uid!=null){
                attributes.put("uid", uid);
            }else{
                return false;
            }
        }
        return true;
    }


    @Override
    public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {

    }
}
 
Handler处理类实现
 
/**
 * @Author: Richard_yyf
 * @Description:
 * @Date: Created in 15:31 2018/2/24
 */

public class MySocketHandler implements WebSocketHandler {

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

    // websocket连接建立
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        String uid = (String) session.getHandshakeAttributes().get("uid");
        logger.info("Websocket Connection established");
        logger.info(String.format("userId:%s", uid));
        logger.info(String.format("getLocalAddress:%s", session.getLocalAddress().toString()));
        logger.info(String.format("getUri:%s", session.getUri().toString()));
        session.sendMessage(new TextMessage("Server:connected OK!"));
        if (SocketSessionMap.socketSession.get(uid) == null) {
            SocketSessionMap.socketSession.put(uid, session);
        }
    }

    // 消息处理
    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {

    }

    // 消息传输错误
    @Override
    public void handleTransportError(WebSocketSession session, Throwable throwable) throws Exception {
        logger.error("Websocket Transport Error");
        if (session.isOpen()) {
            session.close();
        }
        removeSession(session);
    }

    // websocket 连接关闭
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        // TODO Auto-generated method stub
        logger.info(String.format("Websocket:[userId=%s]已经关闭",(String) session.getHandshakeAttributes().get("uid")));
        removeSession(session);
    }

    // 移除Socket会话
    private void removeSession(WebSocketSession session) {
        Iterator<Map.Entry<String, WebSocketSession>> iter = SocketSessionMap.socketSession.entrySet().iterator();
        while (iter.hasNext()) {
            ConcurrentHashMap.Entry entry = iter.next();
            if (entry.getValue() == session) {
                SocketSessionMap.socketSession.remove(entry.getKey());
                logger.info(String.format("Socket会话已经移除:用户ID:%s", entry.getKey()));
            }
        }
    }

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

    /**
     * 给某个用户发送消息
     *
     * @param uid
     * @param message
     * @throws IOException
     */
    public void sendMessageToUser(String uid, TextMessage message)
            throws IOException {
        WebSocketSession session = SocketSessionMap.socketSession.get(uid);
        if (session != null && session.isOpen()) {
            session.sendMessage(message);
        }
    }

}
 
配置类实现
 
/**
 * @Author: Richard_yyf
 * @Description:
 * @Date: Created in 15:24 2018/2/24
 */
@Configuration
@EnableWebMvc
@EnableWebSocket
public class MySocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {

    @Autowired
    private MySocketHandler mySocketHandler;

    @Autowired
    private MyInterceptor myInterceptor;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(mySocketHandler, "/websocket")
                .addInterceptors(myInterceptor);
    }

}
 
springmvc 配置
 
扫包
 
<context:component-scan base-package="com.fingard.rh.msp.socket" />
 
这里使用的是xml，也可以使用注解配置，具体就不细讲了。
 
    <bean id="mySocketHandler" class="com.fingard.rh.msp.socket.MySocketHandler"/>
    <!-- 握手接口/拦截器 -->
    <bean id="myInterceptor" class="com.fingard.rh.msp.socket.MyInterceptor"/>

    <websocket:handlers >
        <websocket:mapping path="/websocket" handler="mySocketHandler"/>
        <websocket:handshake-interceptors>
            <ref bean="myInterceptor"/>
        </websocket:handshake-interceptors>
    </websocket:handlers>
 
dispatcherServlet配置
 
<servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext-mvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>*.action</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/websocket</url-pattern>
    </servlet-mapping>

<servlet>
 
前端(Client)
 
    //webScoket连接事件
    function socket() {
        try{
            var websocket;
            var url = "ws://host:port/项目名/websocket";
            var uid = $("#userId").val();
            if ('WebSocket' in window) {
                // websocket = new WebSocket(url+"?uid="+uid);
                websocket = new ReconnectingWebSocket(url+"?uid="+uid);
            } else {    // 如果程序不支持，使用轮询的方式
                // url = $("#sockjs").val();
                // websocket = new SockJS(url+"?uid="+uid);
                timerRefresh();
            }

            websocket.onopen = function(event) {
                console.log("WebSocket:已连接");
                console.log(event);
            };

            websocket.onmessage = function(event) {
                console.log("WebSocket:收到一条消息",event.data);
                show("您有新的消息！！！");
                setTimeout("closeDiv()",2000); // 最好设置成可以自己点掉的
                loadMail();
            };

            websocket.onerror = function(event) {
                console.log("WebSocket:发生错误 ");
                console.log(event);
            };
            websocket.onclose = function(event) {
                console.log("WebSocket:已关闭");
                console.log(event);
            }

        }catch(e){

        }
    }
 
注：使用reconnecting-websocket.js来实现websocket重连。只用把new WebSocket()替换成new ReconnectingWebSocket()即可。
 
几个坑
 
1、 跨域问题
 
经查阅官方文档springwebsocket 4.1.5版本前默认支持跨域访问，之后的版本默认不支持跨域，需要设置
 
.setAllowedOrigins("*") 
 
我demo的版本是默认支持跨域的，setAllowedOrigins()这个方法也是之后版本才有的。
 
2、 版本问题
 
Spring websocket 版本要和 Spring版本一致，不然会报错
 
3、 sockjs问题
 
sockjs是当浏览器不支持websocket的一种兼容性方案（轮询），但是在使用的时候有很多问题，比如在建立握手协议的时候会自动在原有的url上面加上/info的后缀和t的携带参数。这里我在浏览器不支持websocket时(少数情况)，自己写了一个轮询。等之后调出来了sockjs，再添加内容吧。