websocket

1、定义

WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅

客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输

从上图可见，websocket服务器与客户端通过握手连接，连接成功后，两者都能主动的向对方发送或接受数据

而在websocket出现之前，开发实时web应用的方式为轮询

不停地向服务器发送 HTTP 请求，问有没有数据，有数据的话服务器就用响应报文回应。如果轮询的频率比较高，那么就可以近似地实现“实时通信”的效果

轮询的缺点也很明显，反复发送无效查询请求耗费了大量的带宽和 CPU资源

2、特点

• 全双工

通信允许数据在两个方向上同时传输，它在能力上相当于两个单工通信方式的结合

例如指 A→B 的同时 B→A ，是瞬时同步的

• 二进制帧

采用了二进制帧结构，语法、语义与 HTTP 完全不兼容，相比http/2，WebSocket更侧重于“实时通信”，而HTTP/2 更侧重于提高传输效率，所以两者的帧结构也有很大的区别

不像 HTTP/2 那样定义流，也就不存在多路复用、优先级等特性

自身就是全双工，也不需要服务器推送

3、优点

• 较少的控制开销：数据包头部协议较小，不同于http每次请求需要携带完整的头部

• 更强的实时性：相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少

• 保持创连接状态：创建通信后，可省略状态信息，不同于HTTP每次请求需要携带身份验证

• 更好的二进制支持：定义了二进制帧，更好处理二进制内容

• 支持扩展：用户可以扩展websocket协议、实现部分自定义的子协议

• 更好的压缩效果：Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率

• 应用场景

• 基于websocket的实时通信的特点，经常能看到其广泛的应用场景，下方列举如：

• 弹幕媒体聊天

• 协同编辑

• 基于位置的应用

• 体育实况

• 更新股票基金报价实时更新

开始

设计思路

涉及到实际生产的问题，所以采用Map集合。

• 定时任务开始，设置开始时间，每次进行请求获取当前时间
• 执行时长=当前时间-开始时间
• 百分率=执行时长/任务总耗时。

开始代码

引入包

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

配置类

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

获取bean配置

• 获取bean配置类

//用户获取bean工厂里面的bean
@Component
public class SpringContextUtil<T> implements ApplicationContextAware {
    private static ApplicationContext ac;
    @Override
    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
        ac = applicationContext;
    }

    public static <T>T getBean(Class<?> clazz){
        return (T) ac.getBean(clazz);
    }

}

• 配置redis操作

@Component
public class RedisUtil {

    @Autowired
    private RedisTemplate redisTemplate;

    public void set(String key, Object obj) {
        redisTemplate.opsForValue().set(key, obj);
    }

    public Map<Integer, ProcessInfo> get(String key) {
        return (Map<Integer, ProcessInfo>) redisTemplate.opsForValue().get(key);
    }


    public boolean hasKey(String key) {
        return redisTemplate.hasKey(key);
    }
}

不存内存的原因：

• 如果服务重启任务执行进度会丢失
• 采用这种方式，是因为写websocket会导致注入RedisTemplte为空

WebSocketServer

@ServerEndpoint("/websocket/taskProcess")
@Component
public class WebSocketServer {

    public static Logger logger = LoggerFactory.getLogger(WebSocketServer.class);

    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<>();


    public static Map<Integer, ProcessInfo> TASK_PROCESS = new HashMap<>();

    public static List<ProcessInfo> PROCESS_INFO = new ArrayList<>();

    private Session session;

    @OnOpen
    public void onOpen(Session session) throws IOException {
        this.session = session;
        webSocketSet.add(this);
        //防止累加：清空进度列表
        WebSocketServer.PROCESS_INFO.clear();
        //获取bean
        RedisUtil redisTemplate = SpringContextUtil.getBean(RedisUtil.class);
        //缓存中是否存在
        Boolean key = redisTemplate.hasKey(VideoConstants.PROCESS_TIME);
    	//替换进度
        if (key) {
            TASK_PROCESS = redisTemplate.get(VideoConstants.PROCESS_TIME);
        } else {
            redisTemplate.set(VideoConstants.PROCESS_TIME, TASK_PROCESS);
        }
        TASK_PROCESS.forEach((integer, processInfo) -> PROCESS_INFO.add(processInfo));
        sendMessage();
    }

    public void sendMessage() {
        try {
            this.session.getBasicRemote().sendText(JSON.toJSONString(PROCESS_INFO));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        for (WebSocketServer webSocketServer : webSocketSet) {
            if (webSocketServer.session.isOpen()) {
                webSocketServer.sendMessage();
            } else {
                webSocketSet.remove(webSocketServer);
            }
        }
    }
}

轮询接口

@RestController
public class WebSocketController {

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

    @Autowired
    private WebSocketServer webSocketServer;

    @Autowired
    private RedisTemplate redisTemplate;

    @RequestMapping("/getTaskProcess")
    public String refresh() {
        //清空
        WebSocketServer.PROCESS_INFO.clear();
        WebSocketServer.TASK_PROCESS.forEach((integer, processInfo) -> {
            //根据当前时间算出执行进度百分比
            processInfo.percent();
            //加入列表
            WebSocketServer.PROCESS_INFO.add(processInfo);
        });
        //存入进度
        redisTemplate.opsForValue().set(VideoConstants.PROCESS_TIME, WebSocketServer.TASK_PROCESS);
        //发送信息
        webSocketServer.onMessage("", null);
        return "send message:success";
    }
}

实体层

public class ProcessInfo implements Serializable {

    private int cameraId;

    //时长
    private long duration;


    //开始事件
    private long startTime;

    //百分率
    private double percentage;
    //0未开始 1开始
    private int status;


    public void percent() {
        long now = new Date().getTime();
        //因为整型/整型会导致percentage为0.所以采用double.
        this.percentage = (Double.parseDouble(String.valueOf((now - this.startTime))) / this.duration) * 100;
    }

    public void init(long startTime) {
        this.startTime = startTime;
        this.status = 1;
        this.percent();
    }

    public ProcessInfo(int cameraId, long duration) {
        this.cameraId = cameraId;
        this.status = 0;
        this.duration = duration;
    }


    public long getStartTime() {
        return startTime;
    }

    public void setStartTime(long startTime) {
        this.startTime = startTime;
    }

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public double getPercentage() {
        return percentage;
    }

    public void setPercentage(double percentage) {
        this.percentage = percentage;
    }

    public long getDuration() {
        return duration;
    }

    public void setDuration(long duration) {
        this.duration = duration;
    }

    public int getCameraId() {
        return cameraId;
    }

    public void setCameraId(int cameraId) {
        this.cameraId = cameraId;
    }

}

前端页面

    var socket;
    var basePath = [[${basePath}]]
    $(document).ready(function () {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持")
        } else {
            socket = new WebSocket((basePath + "websocket/taskProcess").replace("http", "ws"));

            //打开事件
            socket.onopen = function (result) {
                console.log(result);
            }

            // 获得信息
            socket.onmessage = function (result) {
                var model = JSON.parse(result.data)
                for (var key in model) {
                    //指定一个class="camera-"+cameraId;
                    //涉及到项目不方便展示
                    var process = ".camera-" + model[key].cameraId;
                    if (model[key].status == 1 && model[key].percentage <= 100) {
                        $(process).css("width", Number(model[key].percentage).toFixed(1) + '%');
                        $(process).css("background-color", '#4CAF50');
                        $(process).html(Number(model[key].percentage).toFixed(1) + '%');
                    } else if (model[key].status == 1 && model[key].percentage >= 100) {
                        $(process).html("已完成");
                        $(process).css("width","");
                    } else if (model[key].status == 0) {
                        $(process).html("未开始")
                    }
                }
            }
        }
    })

    window.setInterval(function () {
        $.ajax({
            url: basePath + "getTaskProcess",
            method: 'post',
            success: function (res) {
                console.log(res);
            }
        })
    }, 1000);

$(process).html("未开始")
                }
            }
        }
    }
})

window.setInterval(function () {
    $.ajax({
        url: basePath + "getTaskProcess",
        method: 'post',
        success: function (res) {
            console.log(res);
        }
    })
}, 1000);

有问题可以留言研究：我的博客