ajax 长轮询_js 轮询

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1.三者介绍

3.1）难题1（http协议的被动性）：采用 WebSocket 协议后，服务器可以主动推送消息给客户端；而不需要客户端以（长/短）轮询的方式发起http请求到server以获取数据更新反馈；这样一来，客户端只需要经过一次HTTP请求，就可以做到源源不断的信息传送了（在程序设计中，这种设计叫做回调，即：server 端有信息了再来通知client 端，而不是 client 端 每次都傻乎乎地跑去轮询server端 是否有消息更新）；

3.2）难题2（http协议的无状态性/健忘性）：短轮询是每次http请求前都要建立连接，而长轮询是相邻几次请求前都要建立连接；http请求响应完成后，服务器就会断开连接，且把连接的信息全都忘记了；所以每次建立连接都要重新传输连接上下文（下面有补充），将 client 端的连接上下文来告诉server 端；而 WebSockct只需要一次HTTP 握手，整个通讯过程是建立在一次连接（状态）中的，server 端会一直推送消息更新反馈到客户端，直到客户端关闭请求，这样就无需 客户端为发送消息而建立不必要的 tcp 连接 和 为了建立tcp连接而发送不必要的冗余的连接上下文消息；

2.三者之间比较

3.三者总结:

以上的介绍和对比来自于:http://blog.csdn.net/pacosonswjtu/article/details/52035252

个人觉得大概的可以理解为:

 1.轮询就是定时发送请求,响应请求

 2.长轮询,定时就是发送请求,响应请求,客户端接收到响应后,继续发送请求,从而达到不间断.

 3.socket就是发出请求,标识这个请求为长连接,服务端知道后,以后就不需要客户端发送请求,服务端就可以向客户端推送数据.

4.在SSM框架中使用springSocket(后续扩展实际项目如何使用)

首先要知道流程是如何走的,客户端像服务端发出请求,并标识这个请求是长连接,服务端接收到后,处理业务,并将数据传递给客户端(当然也可以不传递),这样每次服务端都可以像客户端推送数据.,大致的流程就是这样

pom.xml

        <!--socket使用的jar-->
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>4.1.3.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-messaging</artifactId>
            <version>4.1.3.RELEASE</version>
        </dependency>

自定义config类

package com.bile.socket;

import org.springframework.stereotype.Component;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

import javax.annotation.Resource;

/**
 *Title:      MyWebSocketConfig<br/>
 *Description: 接口地址实例层
 *  服务一启动就调用
 */
@Component
@EnableWebMvc
@EnableWebSocket
public class MyWebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer{

    @Resource
    MyWebSocketHandler handler;
    @Resource
    UserWebSocketHandler handler2;
    @Resource
    NewStatisticsWebSocketHandler handler3;
    
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        System.out.println("初始化进来-----");
        // TODO Auto-generated method stub
        registry.addHandler(handler, "/wsMy").addInterceptors(new HandshakeInterceptor());
        registry.addHandler(handler, "/wsMy/sockjs").addInterceptors(new HandshakeInterceptor()).withSockJS();
        registry.addHandler(handler2, "/wsUser").addInterceptors(new HandshakeInterceptor());
        registry.addHandler(handler2, "/wsUser/sockjs").addInterceptors(new HandshakeInterceptor()).withSockJS();
        
        registry.addHandler(handler3, "/wsNewStatistics").addInterceptors(new HandshakeInterceptor());
        registry.addHandler(handler3, "/wsNewStatistics/sockjs").addInterceptors(new HandshakeInterceptor());
    }

}

自定义hand

package com.bile.socket;

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.support.HttpSessionHandshakeInterceptor;

import java.util.Map;


/**
 *Title:      HandshakeInterceptor<br/>
 *Description:  会话标记层
 *  web断先进入当前方法--->再进入MyWebSocketHandler去缓存当前session的客户端
 */
public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor{

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {
        System.out.println("第2步进来：HandshakeInterceptor->beforeHandshake");
        // TODO Auto-generated method stub
        String uid = ((ServletServerHttpRequest) request).getServletRequest().getParameter("uid");
        // 标记用户
        if(uid!=null){
            attributes.put("uid", uid);
        }else{
            return false;
        }
        return super.beforeHandshake(request, response, wsHandler, attributes);
        
    }

    @Override
    public void afterHandshake(ServerHttpRequest request,  ServerHttpResponse response, WebSocketHandler wsHandler,  Exception ex) {
        System.out.println("第3步进来：HandshakeInterceptor->afterHandshake");
        super.afterHandshake(request, response, wsHandler, ex);
    }

}

自定义socket

import org.springframework.stereotype.Component;
import org.springframework.web.socket.*;

import java.io.IOException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;


/**
 *Title:      MyWebSocketHandler<br/>
 *Description: 会话连接层
 */
@Component
public class MyWebSocketHandler implements WebSocketHandler{
	

    public static final Map<String, WebSocketSession> userSocketSessionMap;

    static {
        userSocketSessionMap = new HashMap<String, WebSocketSession>();
    }

    /**
     * 连接成功时候，会触发页面上onopen方法
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // TODO Auto-generated method stub
    	//String jspCode = (String) session.getAttributes().get("SID");
        if (userSocketSessionMap.get(session.getId()) == null) {
        	userSocketSessionMap.put(session.getId(), session);
        }
        System.out.println("第4步进来：：Socket会话连接成功::Key="+session.getId());
        
    }

    //暂时没用
    /**
     * js调用websocket.send时候，会调用该方法
     */
    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {

    }
    /**
     * 消息传输错误处理
     */
    //暂时没用
    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        // TODO Auto-generated method stub
        System.out.println("第1步：开始移除用户" );
        if (session.isOpen()) { session.close(); }
        Iterator<Entry<String, WebSocketSession>> it = userSocketSessionMap.entrySet().iterator();
        // 移除Socket会话
        while (it.hasNext()) {
            Entry<String, WebSocketSession> entry = it.next();
            //if (entry.getValue().getId().equals(session.getId())) {
                userSocketSessionMap.remove(entry.getKey());
                System.out.println("--------->>>>用户Key：：" + entry.getKey());
                break;
            //}
        }
    }

    /**
     * 关闭连接时触发
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
    	System.out.println("Websocket:" + session.getId() + "已经关闭");
        Iterator<Entry<String, WebSocketSession>> it = userSocketSessionMap.entrySet().iterator();
        // 移除Socket会话
        System.out.println("=======关闭连接=====");
        while (it.hasNext()) {
            Entry<String, WebSocketSession> entry = it.next();
            //if (entry.getValue().getId().equals(session.getId())) {
                userSocketSessionMap.remove(entry.getKey());
                System.out.println("Socket会话已经移除:用户ID" + entry.getKey());
                break;
            //}
        }
    	
    }

    @Override
    public boolean supportsPartialMessages() {
        // TODO Auto-generated method stub
        return false;
    }
    /**
     * 群发
     * @Title:       broadcast
     * @Description: TODO
     * @param:       @param message
     * @param:       @throws IOException
     * @return:      void
     * @throws
     */
    public void broadcast(final TextMessage message) throws IOException {
        Iterator<Entry<String, WebSocketSession>> it = userSocketSessionMap.entrySet().iterator();
        VoThread thread=null;
        // 多线程群发
        while (it.hasNext()) {

            final Entry<String, WebSocketSession> entry = it.next();

            if (entry.getValue().isOpen()) {
            	thread=new VoThread(entry.getValue(),message);
            	new Thread(thread).start();
            	//注意这里不能使用匿名内部类,不然会出现问题
/*                new Thread(new Runnable() {

                    public void run() {
                        try {
                            if (entry.getValue().isOpen()) {
                                entry.getValue().sendMessage(message);
                            }
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }

                }).start();*/
            }

        }
    }

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

}

页面代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>socket</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.js"></script>
<script type="text/javascript">
    var sock=null;
    if (window['WebSocket']) {
            sock= new WebSocket('ws://' + window.location.host+'/bile.api/wsMy?uid=1');
    }
    sock.onopen = function() { /* 连接成功时 */
     //页面加载完毕,出发onopen方法,这时候可以选择发送参数,也可以不发送
     sock.send(JSON.stringify({to:'1my'}));
    };
    sock.onmessage = function(e) {/* 服务端推送数据过来 */
     //在后台socket中像客户端发送数据时,自动调用这方法拿到数据
     $('#data').text(e.data);
    };
    sock.onclose = function() {
       alert('Closing');
    };
</script>
</head>
<body>
 <h1 id="data"></h1>
</body>
</html>

5.后语

以上只是我自己写的demo,仅供参考,希望大家和我一起学习,有想法提出来,一起讨论,我也是最近才学socket.后续我集成到实际项目中使用后,会完善此贴!