初识webSocket

最新推荐文章于 2022-11-22 20:59:07 发布
最新推荐文章于 2022-11-22 20:59:07 发布
阅读量212 收藏
点赞数 1
文章标签： javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangbaba1/article/details/107384671
版权

昨天公司派给我一个任务 让我跟后端联调webSocket。之前没接触过这个东西，就记录下来

用通俗的话来讲的话 传统HTTP协议 如果请求数据或者信息，只能客户端发送数据给服务端。然后服务端接收数据并响应给客户端，说白了就是有缺陷。只能客户端主动。服务端是被动的。然而webSocket出现了。webSocket的出现从而解决了这一现象。不仅客户端主动，服务端也能主动。说白了讲webSocket就是客户端与服务端一种双向的通讯协议。不仅优化传送数据的带宽。而且解决了传统出现的缺陷这一难题。下面放代码

前端代码

<!DOCTYPE HTML>
<html>

<head>
    <title>大屏B</title>
</head>

<body>
    Welcome<br/>
    <input id="text" type="text" /><button onclick="send()">Send</button> <button onclick="closeWebSocket()">Close</button>
    <div id="message">
    </div>
</body>

<script type="text/javascript">
    var websocket = null;
    var wsGroupId = "20191009170924631538723061895168";// 部门id，区别分组
    var type = "screenB"// 相当于标识，区分屏幕，同一个分组从A-Z代表26个屏幕
    var url = "ws://192.168.50.174:8011/ws/" + wsGroupId + "/" + type;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket(url);
    } else {
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function() {
        // setMessageInnerHTML("error");
        console.log(getNowTime() + ' 发生异常了');
        reconnect(url);
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event) {
        //setMessageInnerHTML("open");
        console.log(getNowTime() + " Socket 已打开");
        send("heartbeat");
        //心跳检测重置
        heartCheck.start()
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event) {
        //websocket.setMessageInnerHTML(event.data);
        // 维持心跳
        heartCheck.start();
        if (event.data != 'heartbeat') {
            document.getElementById("text").value = event.data;
            console.log(event.data)
        }
        //window.location.href="http://www.jb51.net";
    }

    //连接关闭的回调方法
    websocket.onclose = function() {
        // websocket.setMessageInnerHTML("close");
        console.log(getNowTime() + " Socket已关闭");
        reconnect(url)
    }

    //    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function() {
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
        lockReconnect = false;
        reconnect(url);
    }

    //发送消息
    function send(message) {
        // var message = document.getElementById('text').value;
        websocket.send(message);
    }

    var lockReconnect = false; //避免重复连接
    //重试连接socket
    function reconnect(url) {
        if (lockReconnect) {
            return;
        };
        lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        tt && clearTimeout(tt);
        tt = setTimeout(function() {
            createWebSocket(url);
            lockReconnect = false;
        }, 10000);
    }
    //心跳检测
    var heartCheck = {
        timeout: 5000,
        timeoutObj: null,
        serverTimeoutObj: null,
        start: function() {
            console.log(getNowTime() + " Socket 心跳检测");
            var self = this;
            this.timeoutObj && clearTimeout(this.timeoutObj);
            this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
            this.timeoutObj = setTimeout(function() {
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                //onmessage拿到返回的心跳就说明连接正常
                console.log(getNowTime() + ' Socket 连接重试');
                send("heartbeat");
                self.serverTimeoutObj = setTimeout(function() {
                    console.log(this);
                    close();
                }, self.timeout);
            }, this.timeout)
        }
    }

    /**
     * 获取系统当前时间
     * @returns
     */
    function p(s) {
        return s < 10 ? '0' + s : s;
    }

    function getNowTime() {
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours(); //获取当前小时数(0-23)
        var m = myDate.getMinutes(); //获取当前分钟数(0-59)
        var s = myDate.getSeconds();
        return year + '-' + p(month) + "-" + p(date) + " " + p(h) + ':' + p(m) + ":" + p(s);
    }
</script>

</html>

付java代码

 package com.example.springtest01.socket;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
/**
 * @author feiyang
 */
@ServerEndpoint(value = "/ws/{wsGroupId}/{type}")
@Component
public class WebSocket {
    private static final Logger logger = LoggerFactory.getLogger(WebSocket.class);
    private static SessionStorage sessionStorage = SessionStorage.getInstance();
    private static Map<String, String> sessionGroup = new ConcurrentHashMap<>(16);
    /**
     * 连接建立成功调用的方法
     * @param session
     * @param type
     * @param wsGroupId
     * @throws Exception
     */
    @OnOpen
    public void onOpen(@PathParam("wsGroupId") String wsGroupId, @PathParam("type") String type, Session session) {
        sessionGroup.put(session.getId(), wsGroupId);
        sessionStorage.putSession(session, wsGroupId, type);
        session.setMaxIdleTimeout(3600000);
        logger.info("websocket连接成功 sessionId:" + session.getId());
        logger.info("websocket连接成功 type:" + type);
        logger.info("websocket连接成功 wsGroupId:" + wsGroupId);
        logger.info("websocket链接数量：" + sessionGroup.size());
    }
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(@PathParam("wsGroupId") String wsGroupId, @PathParam("type") String type, Session session) {
        logger.info("websocket连接关闭成功 sessionId:" + session.getId());
        logger.info(type);
        logger.info(sessionGroup.get(session.getId()));
        SessionStorage.getInstance().removeSession(sessionGroup.get(session.getId()), type);
    }
    /**
     * 收到客户端消息后调用的方法
     * @param message
     * @param session
     */
    @OnMessage
    public void onMessage(@PathParam("wsGroupId") String wsGroupId, @PathParam("type") String type,String message, Session session) {
        try {
            logger.info(message);
            sessionStorage.sendTextSingle( wsGroupId,  type,  message);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    /**
     * 发生错误时调用
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        logger.info("websocket连接失败 sessionId:" + session.getId());
    }
}
package com.example.springtest01.socket;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.scheduling.annotation.Async;
import org.springframework.util.StringUtils;
import javax.websocket.Session;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
/**
 *
 * 作为对外的工具类
 * @author zhoukx
 */
public class SessionStorage {
    private Map<String, Map<String, Session>> sessionStore = new ConcurrentHashMap<>();
    private static volatile SessionStorage storage;
    private static final Logger logger = LoggerFactory.getLogger(SessionStorage.class);
    private static final String  FLAG_HEART_BEAT = "heartbeat";
    private SessionStorage() {
    }
    /**
     *   双端检索机制创建一个   SessionStorage 实例
     * @return
     */
    public static synchronized SessionStorage getInstance() {
        if(storage == null) {
            synchronized(SessionStorage.class) {
                if(storage == null) {
                    storage = new SessionStorage();
                }
            }
        }
        return storage;
    }
    /**
     * 将ws连接会话分组保存
     * @author  feiyang
     * @param session
     * @param wsGroupId
     * @param type
     * @return  void
     * @date    2019/9/19
     * @throws
     */
    public void putSession(Session session, String wsGroupId, String type) {
        if(session != null) {
            Map<String, Session> sessionGroup = this.sessionStore.get(wsGroupId);
            if (sessionGroup == null) {
               sessionGroup = new ConcurrentHashMap<>(16);
               this.sessionStore.put(wsGroupId, sessionGroup);
            }
            sessionGroup.put(type, session);
        }
    }
    /**
     * ws连接关闭时删除会话
     * @author  feiyang
     * @param wsGroupId
     * @param type
     * @return  void
     * @date    2019/9/19
     * @throws
     */
    public void removeSession(String wsGroupId, String type) {
        Map<String, Session> sessionGroup = sessionStore.get(wsGroupId);
        sessionGroup.remove(type);
        if (sessionGroup.isEmpty()) {
            this.sessionStore.remove(wsGroupId);
        }
    }
    /**
     * 获取指定ws连接会话
     * @author  feiyang
     * @param wsGroupId
     * @param type
     * @return  javax.websocket.Session
     * @date    2019/9/19
     * @throws
     */
    public Session getSession(String wsGroupId, String type) {
        Map<String, Session> sessionGroup = this.sessionStore.get(wsGroupId);
        return sessionGroup.get(type);
    }
    /**
     * 获取指定ws连接会话组全部session
     * @author  feiyang
     * @param wsGroupId
     * @return  java.util.List<javax.websocket.Session>
     * @date    2019/9/19
     * @throws
     */
    public List<Session> getSessions(String wsGroupId) {
        Session[] sessions = new Session[]{};
        Map<String, Session> sessionGroup = this.sessionStore.get(wsGroupId);
        return Arrays.asList(sessionGroup.values().toArray(sessions));
    }
    /**
     * 获取全部的会话
     * @author  feiyang
     * @param
     * @return  java.util.List<javax.websocket.Session>
     * @date    2019/9/19
     * @throws
     */
    public List<Session> getAllSession() {
        List<Session> sessionList = new ArrayList<>();
        for (Map<String, Session> sessionGroup : sessionStore.values()) {
            Session[] sessions = new Session[]{};
            sessionList.addAll(Arrays.asList(sessionGroup.values().toArray(sessions)));
        }
        return sessionList;
    }
    /**
     * 针对单个会话发送文本消息
     * @author  feiyang
     * @param wsGroupId
     * @param type
     * @param text
     * @return  void
     * @date    2019/9/19
     * @throws
     */
    @Async
    public void sendTextSingle(String wsGroupId, String type, String text){
        try {
            Session session = getSession(wsGroupId, type);
            if (session.isOpen()) {
                session.getBasicRemote().sendText(text);
                if (text.equals(FLAG_HEART_BEAT)) {
                    logger.info("socket维持链接状态：" + text);
                } else {
                    logger.info("已发送》》》》》" + text);
                }
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    /**
     * 针对会话组发送文本信息
     * @author  feiyang
     * @param wsGroupId
     * @param text
     * @return  void
     * @date    2019/9/19
     * @throws
     */
    @Async
    public void  sendTextGroup(String wsGroupId, String text) {
        try {
            List<Session> sessions = getSessions(wsGroupId);
                for(Session session : sessions) {
                    if (session.isOpen()) {
                        session.getBasicRemote().sendText(text);
                        logger.info("已发送》》》》》" + text);
                    }
                }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
//    /**
//     * 针对全部会话发送消息
//     * @author  feiyang
//     * @param text
//     * @return  void
//     * @date    2019/9/19
//     * @throws
//     */
//    public void sendTextAll(String text) {
//        try {
//            List<Session> sessions = getAllSession();
//            for(Session session : sessions) {
//                if (session.isOpen()) {
//                    session.getBasicRemote().sendText(text);
//                    logger.info("已发送》》》》》" + text);
//                }
//            }
//        } catch (IOException e) {
//            e.printStackTrace();
//        }
//    }
}

package com.example.springtest01.socket;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
 * @Author ：feiyang
 * @Date ：Created in 4:03 PM 2019/9/18
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter (){
        return new ServerEndpointExporter();
    }
}
YangbABa1
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
websocket demo（java客户端，心跳监测）
02-07
websocket实例，内部含有详细使用说明以及代码注释。java写的websocket客户端，包含心跳监测。 此架包可解决问题：系统使用websocket 访问远程上的实时数据，但是有时候会停止更新实时数据，只要重启了自己的系统，就会继续更新数据了，此包可以完美解决此问题。
springboot初识
04-21
SpringBoot初识：快速搭建与应用 SpringBoot是由Pivotal团队提供的全新框架，其设计目标是用来简化新Spring应用的初始搭建以及开发过程。它集成了大量常用的第三方库配置，如JPA、Thymeleaf、WebSocket等，使得...
websocket之socket.io前后端联调详解（nodejs方向）
m0_37685031的博客
05-13 941
在我们的开发中，传统的ajax是客户端向服务器发送请求，你需要拿什么数据就要发什么请求，像那种数据不断变化的，我们只能隔一会请求一次，隔一会请求一次，这就是我们常说的ajax轮询，但是websocket的出现极大的改善了这一现状，一旦建立连接，服务器就能主动的向客户端发送数据，美滋滋。接下来我带大家来领会websocket的奥妙吧，看看实战项目中的websocket前后端联调是怎么实现的。 1. 在服务端express中使用socket.io // sockeet 在nodejs中需要与nodejs服务建立
记录一次解决问题的思路：联调traccar的websocket协议
yinrushuai0322的专栏
11-22 441
websocket、nginx、如何解决问题？
springboot websocket 设置长连接时间
siqsiqsiq3的博客
07-30 1万+
在@ServerEndpoint类中的 @OnOpen public void onOpen(Session session）方法 中 session.setMaxIdleTimeout(3600000);
WebSocket的实际应用(SpringBoot+Vue)
YC是个程序员的博客
09-02 934
1、WebSocket 简单介绍   随着互联网的发展，传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来，随着HTML5的诞生，WebSocket协议被提出，它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据。   我们知道，传统的HTTP协议是无状态的，每次请求（request）都要由客户端（如 浏览器）主动发起，服务端进行处理后返回response结果，而服务端很难主动向客户端发送数据；这种客户端是主动方，服务端是被动方的传统Web模式
WebSocket4Net(0.6).Source.zip
01-07
6. **README.TXT**：这个文件通常包含项目的简短介绍、安装指南、使用示例以及可能的故障排除信息，是初识项目的重要参考。 7. **WebSocket4Net.Silverlight**：这个文件夹可能包含了WebSocket4Net库的Silverlight...
一、初识 Spring MVC
最新发布
08-09
- 还可以集成模板引擎、WebSocket、Spring Security 等其他功能。 通过深入理解 Spring MVC 的这些关键知识点，开发者能够更好地掌握 Web 应用开发，提升项目的质量和效率。在实际项目中，可以根据需求灵活配置和...
初识PHP中的Swoole
12-17
最少的性能损耗，换取最大的开发效率。利用Swoole框架，开发一个复杂的Web功能，可以在很短的时间内完成。 官方定义： ... Swoole内置了Http/WebSocket服务器端/客户端、Http2.0服务器端。 Swoole
第1章 初识Spring的基本应用.ppt
11-11
Web模块则包含WebSocket、Servlet、Web MVC等，支持Web应用的开发。 **Spring的优点**在于其非侵入式设计，使得应用程序可以在不依赖Spring的情况下编写。此外，Spring还支持AOP进行面向切面编程，方便解耦和简化...
WebSocket前后端联调
不当初
03-05 1547
WebSocket前后端联调 问题简介  最近由于要进行态势推演的开发，该功能需要实现多个websocket的管理，因此，在进行开发时，学习了关于前后端联调的一些细节，记录一下。该文章主要描述如何高效调试websocket的开发。 实践 开发环境  WebSocket的后端使用Spring Boot通过实现。通过地址监听，地址如下： @Slf4j @ServerEndpoint(value = "/tshd/deduct/api/v2.1/{id}/{channelId}") @Component publ
SpringBoot 整合 websocket （六）—— 后端补充
半路凉亭
11-01 727
前面的几篇文章将原始socketweb做了前后端封装，在实际项目中使用时如果是单对单的通讯已经是可以使用了，如果是在非单对单使用时，还是有一定问题的，例如有这样一个考试场景，当所有考生打开问卷时，每个考生在页面上的每一次操作都会实时发送到管理端的监控页面上，如每个考生正在做的题目序号，考生离开考试页面，切屏操作等。这个时候如果管理端的监控页面只在一个浏览器上的一个标签页里打开，前面所写就可以实现，但是如果需要在多个地方同时监控，那就有问题了，操作记录只会在一个页面上显示。下面还是以前面的对话聊天为例。
Redis解决websocket在分布式场景下session共享问题
weixin_44421461的博客
02-16 1625
点击上方“Java基基”，选择“设为星标”做积极的人，而不是积极废人！每天14:00更新文章，每天掉亿点点头发...源码精品专栏原创 | Java 2021超神之路，很肝~中文详细...
springboot集成websocket实现心跳维持，防止自动断开
weixin_42226741的博客
07-14 8783
1.maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.projectlombok&...
websocket实战（3） 错误处理及配置管理
weixin_34342992的博客
09-24 4279
回顾websocket实战（1） 入门websocket实战（2） 信息处理发送、接收和编码通过前面说明，已经轻松构建一个简单的websocket ServerEndPoint了。可以为EndPoint加上×××，编码器，为EndPoint提供支持。但是，作为一个服务器，遇到错误怎么办？websocket作为一个简单的容器组件，也具备简单配置管理功能。1.错误处理1.1@on...
websocket timeout
i289292951的博客
04-24 2109
我的服务端是在阿里云 可能出现的原因： 安全组是否配置 防火墙端口号是否打开（我的是因为这个原因）：解决方法如下 1、开启防火墙 systemctl start firewalld 2、设置打开的端口号（永久打开） firewall-cmd --add-port=8000/tcp --permanent 3、更新一下：在设置好端口后，需要执行 firewall-cmd --rel...
Socket 设置连接超时时间
JackieLiuLixi的专栏
07-02 2051
public static void main(String[] args) { Socket socket = new Socket(); SocketAddress inetAddress = new InetSocketAddress("localhost", 80); try { socket.connect(inetA
给websocket加入心跳包防止自动断开连接
热门推荐
http://kingim.cn/
09-05 2万+
var userId=$("#userId").val(); var lockReconnect = false; //避免ws重复连接 var ws = null; // 判断当前浏览器是否支持WebSocket var wsUrl = serverConfig.cyberhouse_ws+userId; createWebSocket(wsUrl); //连接wsfunc
websocket连接失败
狂云歌的专栏
06-26 1万+
websocket连接失败@(markdown) 最近项目里调试websocket相关的nodejs实现的server，刚接触web开发的小伙伴们对websocket协议不熟悉，遇到问题很容易悲剧。这里只说自己理解的部分以及解决问题的经验吧。 首先，nodeserver用的socketio，于是写了个页面，用js发起websocket握手，发现一直是longpoll，猜测webserver不支持
Swoole深入指南：从入门到实践
2. 初识Swoole章节深入解析了Swoole的核心概念，包括Worker进程（处理用户请求）、TaskWorker进程（处理后台任务）、Timer定时器（执行定时任务）、Process进程（多进程模型）、Table内存表（用于进程间数据共享）...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值