01-26lhj

src/App.vue

@@ -6,7 +6,35 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  methods:{
+    localSocket() {
+      let that = this;
+      if ("WebSocket" in window) {
+        console.log("您的浏览器支持 WebSocket!");
+        that.ws = new WebSocket(`ws:http://132.232.92.186:8888/api/chatHub`);
+        that.$websocket.setWs(that.ws);
+        that.ws.onopen = function() {
+          console.log('开始连接')
+          that.$websocket.ws.send('给后端必要的参数')
+        };
+        that.ws.onclose = function() {
+          // 防链接超时，（websocket在一定时间内没有数据交互，就会断开），关闭后重启
+          console.log("连接已关闭...");
+          setTimeout(() => {
+            that.localSocket();
+          }, 2000);
+        };
+      } else {
+        // 浏览器不支持 WebSocket
+        console.log("您的浏览器不支持 WebSocket!");
+      }
+    }
+  },
+  created() {
+    //websocket
+    // this.localSocket()
+  },
 }
 </script>
 

src/components/home.vue

@@ -187,6 +187,7 @@
   </div>
 </template>
 <script>
+// const signalR=require('@microsoft/signalr')
 // import * as signalR from "@microsoft/signalr";
 // import * as signalR from "../../node_modules/microso";
 // import child from '~/components/Finance/FeesPage';
@@ -309,6 +310,32 @@ export default {
       console.log('测试');
     },
 
+    //消息通知
+    PostTaskAllocationInit(){
+            var url = "/api/PersonnelModule/PostTaskAllocationInit"
+            var that = this
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer ' + that.userId
+                },
+                data:{
+                    portType:1,
+                    userId: 5
+                }
+            }).then(function (res) {
+                console.log(res)
+                if(res.data.code==200){
+                    that.persolist=res.data.data.executeTaskUserInfos;
+                    that.PostTaskAllocationDetails()
+                }else{
+                    that.$message.error(res.data.msg);
+                }
+            }).catch(function (error) {
+                that.$message.error("获取数据源失败！");
+            });
+        },
 
     //实时通讯
     // async startConnection() {
@@ -342,12 +369,17 @@ export default {
     this.radioChange(false);
     this.ifIndexValue();
     this.getmenu();
+    console.log(this.$store.state.webSocketMsg)
   },
   created() {
     this.userinif = JSON.parse(localStorage.getItem('userinif'));
+    
     // this.startConnection();
   },
   computed: {
+    getWsMsg (){
+        return this.$store.state.webSocketMsg
+    },
     filmenuList: function () {
       return this.menuList.filter(function (item) {
         if (item.modulName == '主页') {
@@ -362,6 +394,14 @@ export default {
         }
       })
     }
+  },
+  watch:{
+    getWsMsg:{
+        handler: function(newVal) {
+            console.log(newVal)
+            alert('接收到webSocket推送'+ newVal)
+        }
+    }
   }
 };
 </script>

src/main.js

@@ -29,9 +29,11 @@ Vue.use(common);//全局
 import plugin from './plugin'//全局
 Vue.use(plugin);//全局
 
-Vue.prototype.$message = Message
+import websocket  from './store/websocket.js'
+Vue.prototype.$websocket = websocket//websocket
+
+Vue.prototype.$message = Message;
 Vue.prototype.$axios = axios;
-;
 
 Vue.config.productionTip = false
 Vue.use(ElementUI);

src/store/index.js

@@ -10,10 +10,14 @@ const store = new Vuex.Store({
 	state () {
 		return {
 			phone :'',
+            webSocketMsg:'1',
 		}
 	},
 	// 在 mutations 内封装数据更新方法
 	mutations: {
+        SET_WS_MSG: (state, msg) =>{
+            state.webSocketMsg = msg
+        },
 		setphone(state,phone){
             state.phone=phone 
         }

src/store/websocket.js

@@ -0,0 +1,65 @@
+export default {
+    ws:{},
+    setWs: function(newWs) {
+      this.ws = newWs
+    }
+  }
+// // <!--引入store，用于管理socket推送来的消息-->
+// import store from '../store'
+// // <!--封装websocket对象-->
+// const WS = {
+//     $ws:null, // webscoket实例
+//     wsUrl: 'http://132.232.92.186:8888/api/chatHub', // websocket链接地址
+//     // <!--初始化webSocket-->
+//     createWS:function(){
+//         if('WebSocket' in window){
+//             this.$ws = new WebSocket(this.wsURl)
+//             this.$ws.onopen = this.wsOpen
+//             this.$ws.onmessage = this.wsMessage
+//             this.$ws.onerror = this.wsError
+//             this.$ws.onclose = this.wsClose
+//         } else {
+//             alert('当前浏览器不支持webSocket')
+//         }
+//     },
+//     // <!--webSocket 打开-->
+//     wsOpen:function() {
+//         this.$ws.send('连接成功')
+//         console.log('== websocket open ==')
+//         // <!--开始心跳-->
+//         heartBeat.start()
+//     },
+//     // <!--websocket 接收到服务器消息-->
+//     wsMessage:function(msg) {
+//         console.log('== websocket message ==', msg)
+//         // <!--接受到消息，重置心跳-->
+//         heartBeat.reset()
+//         store.commit('SET_WS_MSG', msg.data)
+//     },
+//     // <!--websocket 发生错误-->
+//     wsError: function(err){
+//         console.log('== websocket error ==', err)
+//     },
+//     // <!--websocket 关闭连接-->
+//     wsClose: function(event){
+//         console.log('== websocket close ==', event)
+//     }
+// }
+// // <!--webSocket 心跳-->
+// const heartBeat = {
+//     timeout:3000, // 心跳重连时间
+//     timeoutObj:null, // 定时器
+//     reset:function(){
+//         clearInterval(this.timeoutObj)
+//         console.log('websocket 心跳')
+//         WS.start()
+//     },
+//     start:function(){
+//         this.timeoutObj = setTimeout(function(){
+//             if(WS.$ws.readyState === 1){
+//                 WS.$ws.send('HeartBeat')
+//             }
+//         },this.timeout)
+//     }
+// }
+// export default WS