1

env.js

@@ -7,7 +7,8 @@ module.exports = {
   // 开发环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api
   dev: {
     MODE: 'dev',
-    VUE_APP_API_URL: 'http://www.suodee.com/api'
+    VUE_APP_API_URL: 'http://www.suodee.com/api',
+    VUE_APP_WEBSOCKET: 'ws://localhost:8099/ws/asset/'
   },
   // 生产环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api 非独立部署默认为空
   prod: {

nuxt.config.js

@@ -57,6 +57,7 @@ export default {
   plugins: [
     '~plugins/main',
     '~plugins/axios',
+    { src: "~plugins/websocket.js", ssr: true },
     { src: "~plugins/router.js", ssr: true },
     { src: "~plugins/i18n.js", ssr: true },
     { src: "~plugins/element-ui.js", ssr: true },

pages/products/_id.vue

@@ -67,7 +67,7 @@
             <img src="~assets/image/icon/email-highlight.png" :alt="$t('common.sendInquiry')" />
             {{ $t('common.sendInquiry') }}
           </a>
-          <a class="box_shadow" href="javascript:;">
+          <a @click="chat" class="box_shadow" href="javascript:;">
             <img src="~assets/image/icon/msg-highlight.png" :alt="$t('common.chatNow')" />
             {{ $t('common.chatNow') }}
           </a>
@@ -242,6 +242,9 @@ export default {
     onSubmit(e) {
       e.preventDefault()
       console.log(this.dataForm);
+    },
+    chat(){
+      this.$store.dispatch('modules/websocket/websocket_send', 'kehuduan,userface,hello');
     }
   }
 }

plugins/websocket.js

@@ -0,0 +1,6 @@
+export default ({ store }) => {
+    if (process.client){
+        const websocketUrl = 'ws://localhost:8099/ws/asset/kehuduan'
+        store.dispatch('modules/websocket/websocket_init', websocketUrl)
+    }
+}

store/modules/websocket.js

@@ -0,0 +1,55 @@
+export const namespaced = true
+
+export const state = () => ({
+  socket: null,
+  isConnected: false,
+  messages: [],
+  notices: [],
+  count: "0"
+})
+
+export const mutations = {
+  WEBSOCKET_INIT(state,url){
+    state.socket = new WebSocket(url);
+    state.socket.onopen=function () {
+      console.log("WebSocket连接成功");
+    };
+    state.socket.onmessage = function (e) {
+      if (e.data.startsWith("C")) {
+        state.count = e.data;
+      }
+      else if (e.data.startsWith("系统通知")){
+        state.notices.push(e.data);
+        console.log(state.notices);
+      }
+      else {
+        state.message.push(JSON.parse(e.data));
+        console.log(state.message);
+      }
+    };
+    state.socket.onerror= function () {
+      console.log("WebSocket连接发生错误");
+    };
+    state.socket.onclose =  function (e) {
+      console.log("connection closed (" + e.code + ")");
+    };
+  },
+  WEBSOCKET_SEND(state,msg){
+    state.socket.send(msg);
+  },
+  WEBSOCKET_CLOSE(state){
+    state.socket.close();
+  }
+}
+
+export const actions = {
+  websocket_init({commit}, url) {
+    commit('WEBSOCKET_INIT', url)
+  },
+  websocket_send({commit}, msg) {
+    commit('WEBSOCKET_SEND', msg)
+  },
+  websocket_close({commit}){
+    commit('WEBSOCKET_CLOSE')
+  }
+}