vue+koa2 live chat, push bitcoin prices in real time, and crawl movie websites

vue+koa2 chat room, push bitcoin prices in real time, and crawl movie websites

technology stack

vue+vuex+vue-router+socket.io+koa2+mongodb+pm2 automated deployment+Turing robot+[npm script packaging, cdn synchronization, server uploading one command is all done]

Feature list

Get chat history (including front-end paging optimization)

Send text, emoticons, file messages

create group, add group, group search

Modify personal information, group information

Image cropping, compression and uploading

private chat

Turing Robot Access

Scheduled tasks to crawl the prices of digital currencies such as movies and btc and push them to all clients in real time using socket.io

Implementation of one-click packaging and synchronization of the front-end to Qiniu cdn and uploading to the server

pm2 automatic deployment on the server side

Effect demonstration : F12 under chrome or scan the QR code below with your mobile phone

The back-end code is not open for the time being, because it involves a lot of personal configuration data. If you really need it, you can add WeChat MSC199312 (you need to pay 0.0!), after all, this small project has been done intermittently for several weeks, and it took some thought. And the knowledge points involved are still very broad and practical, and I hope to understand, in fact, the main reason is poverty [tears]

part of the code

client 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 = config

router.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 = socket
Vue.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-side 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 + '端口...')
  })

})()