引入socket

package.json

@@ -27,6 +27,7 @@
     "vue-axios": "^2.1.3",
     "vue-i18n": "^8.1.0",
     "vue-router": "^3.0.1",
+    "vue-socket.io": "^2.1.1-b",
     "vuetify": "^1.2.5",
     "vuex": "^3.0.1"
   },

src/i18n/en.js

@@ -35,12 +35,12 @@ export default {
     tableNone: '暂无数据',
   },
   chain: {
-    tableHeader: '区块列表',
+    tableHeader: 'Block List',
     searchHolder: '请输入该输入的',
-    thHeight: '区块高度',
-    thTimestamp: '时间戳',
-    thType: '区块类型',
-    thId: '区块 ID',
+    thHeight: 'Height',
+    thTimestamp: 'Timestamp',
+    thType: 'Type',
+    thHash: 'Hash',
     tableNone: '暂无数据',
   },
 }

src/i18n/zh-CN.js

@@ -36,11 +36,11 @@ export default {
   },
   chain: {
     tableHeader: '区块列表',
-    searchHolder: '请输入该输入的',
+    searchHolder: '输入要查询的区块高度或者区块哈希',
     thHeight: '区块高度',
     thTimestamp: '时间戳',
     thType: '区块类型',
-    thId: '区块 ID',
+    thHash: '区块哈希',
     tableNone: '暂无数据',
   },
 }

src/services/axios.js

@@ -1,4 +1,4 @@
 import axios from 'axios'
 import app from './app'
 
-axios.defaults.baseURL = app.dev ? 'http://localhost:6842/' : 'http://test-sg.bittic.net:6842/'
+axios.defaults.baseURL = app.dev ? 'http://test-jp.bittic.net:6842/api/' : 'http://test-sg.bittic.net:6842/api/'

src/store/modules/chain.js

@@ -1,3 +1,5 @@
+import axios from 'axios'
+
 export default {
   namespaced: true,
 
@@ -7,19 +9,20 @@ export default {
       { text: 'chain.thHeight', value: 'height', align: 'center' },
       { text: 'chain.thTimestamp', value: 'timestamp', align: 'center' },
       { text: 'chain.thType', value: 'type', align: 'center' },
-      { text: 'chain.thId', value: 'id', align: 'center' },
+      { text: 'chain.thHash', value: 'hash', align: 'center' },
     ],
     desserts: [
       {
         height: '1',
         timestamp: '2011-11-20',
         type: '0',
-        id: 'ajlk;gaklewklgjqwejj',
+        hash: 'null',
       },
     ],
     fetching: false,
     filter: '',
     modal: false,
+    isConnected: false,
   },
 
   mutations: {
@@ -34,9 +37,30 @@ export default {
     hideModal(state) {
       state.modal = false
     },
+
+    updateDesserts(state, blockList) {
+      state.desserts = blockList
     },
 
-  actions: {},
+    addDesserts(state, block) {
+      state.desserts.push(block)
+    },
+
+    SOCKET_CONNECT(state, status) {
+      state.isConnected = true
+    },
+  },
+
+  actions: {
+    async queryBlockList({ state, commit }) {
+      let result = await axios.post('Block/getBlockList', { config: { order: 'height DESC' } })
+      commit('updateDesserts', result.data || [])
+    },
+    addNewBlock({ state, commit }, block) {
+      console.log(block)
+      commit('addDesserts', JSON.parse(block))
+    },
+  },
 
   getters: {},
 }

src/store/modules/owner.js

@@ -47,7 +47,7 @@ export default {
       let account = sessionStorage.getItem('KEY_ACCOUNT')
       try {
         account = JSON.parse(account)
-        const result = await axios.post('api/Account/getBalance', {
+        const result = await axios.post('Account/getBalance', {
           Account: { address: account.address },
         })
         commit('updateBalance', result.data || 0)

src/views/Chain.vue

@@ -36,7 +36,7 @@
             <td>{{ props.item.height }}</td>
             <td>{{ props.item.timestamp }}</td>
             <td>{{ props.item.type }}</td>
-            <td>{{ props.item.id }}</td>
+            <td>{{ props.item.hash }}</td>
           </template>
           <template slot="no-results">
             {{ $t('chain.tableNone') }}
@@ -64,7 +64,7 @@
             <td>{{ props.item.height }}</td>
             <td>{{ props.item.timestamp }}</td>
             <td>{{ props.item.type }}</td>
-            <td>{{ props.item.id }}</td>
+            <td>{{ props.item.hash }}</td>
           </template>
           <template slot="no-results">
             {{ $t('chain.tableNone') }}
@@ -85,17 +85,16 @@ import {
   createNamespacedHelpers,
 } from 'vuex'
 
+import Vue from 'vue'
+import store from '../store'
+import VueSocketio from 'vue-socket.io'
+import io from 'socket.io-client'
 const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('chain')
+Vue.use(VueSocketio, io('http://localhost:6842'), store)
 
 export default {
   name: 'Chain',
 
-  data(){
-    return {
-      blockList:[],
-    }
-  },
-  
   computed: {
     ...mapState([
       'headers',
@@ -107,23 +106,28 @@ export default {
     ]),
     ...mapGetters([]),
   },
-
-  created: async function(){
-    let result=await axios({
-      method:'post',
-      url:location.protocol+'//'+location.hostname+':6842/api/Block/getBlockList',
-      data: {config:{order:'height DESC'}}
-    })
-    this.blockList=result.data||[]
+  sockets: {
+    connect() {
+      console.log('socket connected')
+    },
+    newBlock(msg) {
+      this.addNewBlock(msg)
+    },
+  },
+  mounted() {
+    this.queryBlockList()
   },
 
   methods: {
     ...mapActions([
+      'queryBlockList',
+      'addNewBlock',
     ]),
     ...mapMutations([
       'inputFilter',
       'showModal',
       'hideModal',
+      'addDesserts',
     ]),
   },
 }

src/views/Home.vue

@@ -59,7 +59,6 @@ export default {
       sideSelected: this.$route.path,
     }
   },
-
   computed: {
     ...mapState([
       'sideMenus',
@@ -71,7 +70,9 @@ export default {
       'isLogin',
     ]),
   },
+  mounted() {
 
+  },
   methods: {
     ...mapMutations([
       'updateRoute',