Vue+WebSocket实现页⾯消息提醒项⽬中有些系统消息需要实时提醒，如果数据量不⼤的情况下可以考虑定时器。
页⾯效果
主要代码
<script>
export default{
data(){
return{
websocket: null,
}
},
    created(){
//页⾯刚进⼊时开启长连接
this.initWebSocket()
},
    destroyed:function(){
    //页⾯销毁时关闭长连接
      this.websocketclose();
    },
    methods:{
      initWebSocket(){//初始化weosocket
        var userId =getSessiontoken('userId');
const wsuri ="ws://114.116.108.246:81/websocket/socketServer?userId="+userId;//连接地址，可加参数        this.websocket =new WebSocket(wsuri);
        pen =this.websocketonopen;
        r =this.websocketonerror;
        ssage =this.websocketonmessage;
        lose =this.websocketclose;
    },
      websocketonopen(){
        console.log("WebSocket连接成功");
      },
      websocketonerror(e){//错误
      console.log("WebSocket连接发⽣错误");
      },
      websocketonmessage(e){//数据接收
      this.$notify({
title:'系统通知提醒',
message: e.data,
position:'bottom-right',websocket和socket
duration:90000,
type:'warning'
});
      },
      websocketsend(agentData){//数据发送
        this.websock.send(agentData);
      },
    　websocketclose(e){//关闭
        console.log("connection closed ("+ e.code +")");
    　},
  　},
  }
</script>
数据接收的数据格式为
补充⼀
数据格式相关
websocketonmessage(e){
console.log("ee",e);
console.log("eeee",e.data);
const redata = JSON.parse(e.data);
console.log("eeee---",redata);
}
补充⼆
当项⽬退出时需要关闭所有消息提⽰框
let notify =this.$notify({
title:'系统通知提醒',
message: ssage,
position:'bottom-right',
duration:0,
type:'warning',
onClose:function(e){
let param ={
token:getSessiontoken('token'),
messageId: ssageId +''
}
updateMessage(param).then(function(res){
var obj =JSON.parse(utilFile.decrypt(res.data.a));
}).catch(function(err){
console.log(err);
})
}
});
this.ssageId]= notify;
//⽤instanceList接收所有提⽰信息，点击退出按钮时，删除所有var _this =this;
for(let key in _this.instanceList){
_this.instanceList[key].close();
delete _this.instanceList[key];
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。