html全局遮罩,通过websocket来实现实时发布公告

1.index.html代码示例

复制代码
<div id="websocket" style="display:none;position: absolute;color:red;background-color: black;
  width: 100%;height: 100%;z-index: 100; opacity: 0.9; padding-top: 30%;padding-left: 30%; padding-border:1px; "
  onclick="closeDiv()">
  </div>

2.index.html的js代码示例

复制代码
<script>
    // 创建一个WebSocket连接
    const socket = new WebSocket("ws://"+window.location.host+':48080/infra/ws?token='+window.localStorage.getItem('refreshToken'));
    var content = "";
    // 监听连接打开事件
    socket.addEventListener('open', (event) => {
        document.getElementById('websocket').style.display = 'none';
        console.log('WebSocket is open now.');
    });
    function closeDiv() {
        document.getElementById('websocket').style.display = 'none';
    }

    // 监听消息事件
    socket.addEventListener('message', (event) => {
        // this.content = JSON.parse(JSON.parse(event.data).content).text;
        this.content = JSON.parse(JSON.parse(event.data).content).content;
        document.getElementById('websocket').innerHTML = this.content;
        document.getElementById('websocket').style.display = 'block';
        console.log('Message from server: ', event.data);
    });

    // 监听错误事件
    socket.addEventListener('error', (error) => {
        console.error('WebSocket encountered error: ', error);
    });

    // 监听连接关闭事件
    socket.addEventListener('close', (event) => {
        console.log('WebSocket is closed now.');
    });
</script>

3.websocket需要token来连接,所以需要实时获取最新token

复制代码
// 获取token
export const getAccessToken = () => {
  window.localStorage.setItem('refreshToken', wsCache.get(AccessTokenKey) ? wsCache.get(AccessTokenKey) : wsCache.get('ACCESS_TOKEN'))
  return wsCache.get(AccessTokenKey) ? wsCache.get(AccessTokenKey) : wsCache.get('ACCESS_TOKEN')
}

// 刷新token
export const getRefreshToken = () => {
  window.localStorage.setItem('refreshToken', wsCache.get(RefreshTokenKey))
  return wsCache.get(RefreshTokenKey)
}
相关推荐
晓风伴月2 分钟前
Css:overflow: hidden截断条件‌及如何避免截断
前端·css·overflow截断条件
最新资讯动态5 分钟前
使用“一次开发,多端部署”,实现Pura X阔折叠的全新设计
前端
爱泡脚的鸡腿20 分钟前
HTML CSS 第二次笔记
前端·css
灯火不休ᝰ35 分钟前
前端处理pdf文件流,展示pdf
前端·pdf
智践行37 分钟前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态43 分钟前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb661 小时前
框架修改思路
前端·javascript·vue.js
qq_456001651 小时前
43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验
javascript·vue.js·ux
工业互联网专业1 小时前
基于springboot+vue的动漫交流与推荐平台
java·vue.js·spring boot·毕业设计·源码·课程设计·动漫交流与推荐平台
树上有只程序猿1 小时前
Java程序员需要掌握的技术
前端