vue+koa2即時聊天，實時推送比特幣價格，爬取電影網站

獨木橋先生發表於2018-05-07

Vue比特幣網站

技術棧

vue+vuex+vue-router+socket.io+koa2+mongodb+pm2自動化部署+圖靈機器人+[npm script打包，cdn同步，伺服器上傳一個命令全搞定]

功能清單

登陸註冊

獲取聊天記錄（包含前端分頁優化）

傳送文字，表情，檔案訊息

建立群組，新增群組，群組搜尋

修改個人資訊，群組資訊

圖片裁剪壓縮上傳

私聊

圖靈機器人接入

定時任務爬取電影和btc等數字貨幣的價格並使用socket.io實時推送給所有客戶端

前端一鍵打包同步到七牛cdn並上傳到伺服器的實現

server端的pm2自動部署

效果演示chrome下F12或者手機掃描下面的二維碼

後端的程式碼暫時不開放出來，因為涉及到很多個人的配置資料，如果實在需要可以加微信 MSC199312 （需要付費0.0！），畢竟這個小專案斷斷續續也做了幾個星期，也還花了些心思，而且涉及的知識點也都還是很廣很實用的，還望理解，其實主要原因還是窮[淚奔]

部分程式碼

客戶端 main.js

import Vue from 'vue'import App from './App'import router from './router'import VueLazyload from 'vue-lazyload'import store from '@/store'import io from 'socket.io-client'import '@/assets/js/remChange'import '@/assets/js/request'// import { 
wxConfig, updateShare 
  } from '@/assets/js/wxenv'import '@/assets/css/common.scss'import 'swiper/dist/css/swiper.min.css'import config from '@/assets/js/config'import filters from '@/assets/js/filters'import { 
openToast 
  } from '@/assets/js/tools'Vue.config.productionTip = false// 初始化全域性過濾器Object.keys(filters).forEach(item =>
 { 
 Vue.filter(item, filters[item])
  })// 懶載入Vue.use(VueLazyload, { 
 attempt: 1,  // preLoad: 1.3,  error: require('./assets/images/404.png'),  loading: require('./assets/images/loading-img2.gif'),  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']  listenEvents: [ 'scroll' ]
  })Vue.prototype.$config = configrouter.beforeEach((to, from, next) =>
 { 
 // 如果未匹配到路由  if (to.matched.length === 0) { 
   // 如果上級也未匹配到路由則跳轉登入頁面，如果上級能匹配到則轉上級路由    from.name ? next({ 
name: from.name 
  }) : next('/')  
  } else { 
   // 路由切換時改變頁面標題    document.querySelector('title').innerHTML = to.name    // 統計程式碼    if (to.path) _czc.push(['_trackPageview', '/#' + to.fullPath], '')    next()  
  }
  })// 路由變化重新配置微信分享router.afterEach(to =>
 { 
 // wxConfig(() =>
 updateShare())
  })// socket.io 初始化const socket = io.connect(config.socketBase)Vue.prototype.$socket = socketVue.prototype.$socketEmiter = (name, data) =>
 { 
 store.commit('isLoading', true)  return new Promise((resolve) =>
 { 
   socket.emit(name, data, res =>
 { 
     console.log(`${name
  }>
>
>
`, res)      store.commit('isLoading', false)      if (res.status === 1) { 
       resolve(res.data)      
  } else { 
       openToast({ 
         msg: res.message,          duration: 1500        
  })      
  }    
  })  
  })
  }/* eslint-disable no-new */const app = new Vue({ 
 el: '#app',  router,  store,  template: '<
App/>
',  components: { 
App 
  }
  })複製程式碼

server端 app.js

const Koa = require('koa')const { 
resolve 
  } = require('path')const glob = require('glob')const { 
connectDatabase, initAllSchema, initDefaultUser 
  } = require('./database/init')const config = require('./config')const useMiddlewares = app =>
 { 
 glob.sync(resolve(__dirname, './middlewares', '**/*.js')).forEach(item =>
 { 
   require(item)(app)  
  })
  }(async () =>
 { 
 console.log('資料庫初始化...')  await connectDatabase()  initAllSchema()  await initDefaultUser()  const app = new Koa()  console.log('掛載socket.io...')  const server = require('http').Server(app.callback())  const io = require('socket.io').listen(server)  require('./socket')(io)  // 暴露出io可在其他地方做推送功能  module.exports.io = io  console.log('掛載中介軟體...')  useMiddlewares(app)  console.log('初始化定時任務...')  // 多了進行一下封裝？  require('./tools/crawlMovie')  require('./tools/crawlCoin')  server.listen(config.server.PORT, () =>
 { 
   console.log('正在監聽' + config.server.PORT + '埠...')  
  })
  })()複製程式碼