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 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中2 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊3 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿3 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj3 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝3 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3113 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion3 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜3 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾4 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css