那些年的情话,能用高科技传达嘛

那些年的开始

  1. 那些年我们追过女孩的手段
  2. 那些年我们给女孩写过的情书
  3. 那些年我们和女孩羞涩的去表达
  4. 那些年我们去让兄弟给女孩递的情书
  5. 那些年我们在一起谈论自己喜欢的那女孩
  6. 那些年我们一起谋划去怎么追自己喜欢的女孩
  7. 那些年我们怎么去有意思的给自己喜欢的女孩浪漫

说到这里,你是不是也回忆起你心目中的"意难平 "

  1. 看到这张图是不是又要emo了
  2. 看到这张图是不是感觉自己快哭了
  3. 看到这张图片是不是感觉自己很懊悔
  4. 看到这样图片是不是感觉自己错过了什么
  5. 看到这张图片是不是觉得你又应该错过什么呢

现在的emo

正片的介绍

首先,我要介绍的这个技术就是前后端都可以用到的,这个就是Websocket ,这个相信,有些前端人士或者后端的人士都不陌生吧?那么正片开始了。

代码的功能介绍

js 复制代码
public class ReconnectExample1 {

    // 最大重连次数
    private static final int MAX_RETRIES = 20;

    // 初始延迟时间(秒)
    private static final long INITIAL_DELAY = 5;

    // 重连延迟时间递增值(秒)
    private static final long RETRY_DELAY = 15;

    // 连接成功标识 true:已连接 false:断开连接
    private boolean connectFlag = false;

    //再次重连延迟叠加倍数
    private static int i = 1;
    
    // 间隔时间(毫秒)
    private static final long INTERVAL = 15000; 
    
    //有入参`Session`对象(当前连接对象)
    private Session session;


    public void websocketclient(String url){
        try{
            //url:"ws:地址"
            WebSocketContainer container = ContainerProvider.getWebSocketContainer();
            container.connectToServer(ReconnectExample1.class,new URI(url));
            //System.out.println(session);
        }catch (Exception e){
            System.out.println(e);
        }
    }

    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        connectFlag = true;
        try {
            System.out.println("建立连接");
            //获取token并 注册
            Map<String, Object> headers = new HashMap<String, Object>();
            headers.put("名字","值");
            headers.put("名字",值);
            //转换
            Map<String, Object> header = new HashMap<String, Object>();
            header.put("名字",值);
            header.put("名字","值");
            com.alibaba.fastjson.JSONObject json = new
            com.alibaba.fastjson.JSONObject(header);
            session.getBasicRemote().sendText(json.toString());
            //启动定时任务
            this.startKeepAliveTask();
        }catch (Exception e){
            System.out.println(e);
        }

    }
    
    @OnMessage
    public void onMessage(String msg){
        System.out.println("收到消息:"+msg);
        callSos(msg);
    }

    @OnError
    public void onError(Session session,Throwable error){
        System.out.println("连接错误,错误原因:"+error+"重新连接");
    }

    //定时任务
    public void startKeepAliveTask() {
        Timer timer = new Timer();
        TimerTask keepAliveTask = new TimerTask() {
            @Override
            public void run() {
                // 在此处编写发送 keepAlive 的逻辑
                try {
                    Map<String, Object> headers = new HashMap<String, Object>();
                    headers.put("action","keepAlive");
                    JSONObject json = new JSONObject(headers);
                    session.getBasicRemote().sendText(json.toString());
                }catch (Exception e){
                    e.printStackTrace();
                }

            }
        };
        // 启动定时任务,延迟0秒后执行,每15秒执行一次
        timer.scheduleAtFixedRate(keepAliveTask, 15000, INTERVAL);
    }

    //获取信息
    public void callSos(String message){
        //这里面是获取服务器数据
    }
}

注解的介绍

1.@ServerEndpoint
暴露出的ws应用的路径,支持RESTful风格传参,`/websocket/{username}`
看你的应用场景这个
2.@OnOpen
与当前客户端连接成功,有入参`Session`对象(当前连接对象)
3.@OnError
与当前客户端连接异常,有入参`Session`对象(当前连接对象),`Throwable`对象(异常对象),报异常
4.@OnMessage
当前客户端发送消息,有入参`Session`对象(当前连接对象),进行传值。
还有一个特殊的就是@OnError,重连机制的注解,用这个看情况是否需要连接,因此没有写。

重点

js 复制代码
//利用SpringBoot创建项目,需要引入依赖:
<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
 </dependency>

设置好这些我们看一下总体的流程

前后端联合流程图

后端流程图

后言

为什么说标题是那些年的情话,能用高科技传达呢,Websocket 这个很典型,就像某站中的弹幕,还有看视频一些的弹幕,都是通过这个来做的,而且你要是会这个技术,完全可以写一个通过内部的网去聊天,直接发给意难平去看,这样你也不怕被截图留下证据,因为你可以快速的请求,包括心跳机制,都是这个里面的,在或者快速的关闭连接,或者不加重连机制,多次请求就会崩掉。

总结

服务端启动一个WebSocket服务,初始化应用路径、连接打开OnOpen、连接关闭OnClose、连接异常OnError、收到消息OnMessage。OnMessage中需要对来自客户端的消息进行对应的处理,比如广播或者私聊给具体某人。

客户端需要利用WebSocket对象(定义好url),然后初始化OnOpen、OnClose、OnError、OnMessage。OnMessage中需要对来自服务端的消息进行处理,如展示到页面上等。同时还可以需用WebSocket对象的send()方法来给服务端发送数据,并且切记在页面关闭时需要将该连接关闭(利用WebSocket对象的close()方法)。

相关推荐
Jiaberrr13 分钟前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy37 分钟前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白38 分钟前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、38 分钟前
Web Worker 简单使用
前端
web_learning_32141 分钟前
信息收集常用指令
前端·搜索引擎
tabzzz1 小时前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack
凡人的AI工具箱1 小时前
AI教你学Python 第11天 : 局部变量与全局变量
开发语言·人工智能·后端·python
200不是二百1 小时前
Vuex详解
前端·javascript·vue.js
滔滔不绝tao1 小时前
自动化测试常用函数
前端·css·html5
是店小二呀1 小时前
【C++】C++ STL探索:Priority Queue与仿函数的深入解析
开发语言·c++·后端