Vue + KOA2 instant chat, real-time push bitcoin price, climb movie website

Technology stack

Vue +vuex+ VUE-router +socket. IO + KOa2 +mongodb+ PM2 automatic deployment + Turing robot +[NPM script package, CDN synchronization, server upload a command all done]

Feature list

Get chat history (including front-end paging optimization)

Send text, emoticons, file messages

Create groups, add groups, and search groups

Modify personal information and group information

Image clipping compression upload

The private chat

Turing robot access

The timed task crawls the prices of digital currencies such as movies and BTC and pushes them to all clients in real time using socket. IO

Front-end one-click package synchronization to the seven cows CDN and uploaded to the server implementation

Pm2 is automatically deployed on the server

Results demonstrateChrome F12 or mobile phone scan the qr code below

The back-end code is not open for the moment, because it involves a lot of personal configuration data, if really necessary, you can add wechat MSC199312 (need to pay 0.0!). After all, this small project has been done intermittently for a few weeks, but also put some thought into it, and the knowledge points involved are still very wide and practical, but also hope to understand, in fact, the main reason is poor [tears]

Part of the code

The main client. 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

// Initializes the global filter
Object.keys(filters).forEach(item= > {
  Vue.filter(item, filters[item])
})

/ / lazy loading
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 no route is matched
  if (to.matched.length === 0) {
    // If the upper-layer device does not match the route, the login page is displayed. If the upper-layer device matches the route, the upper-layer device forwards the route
    from.name ? next({ name: from.name }) : next('/')}else {
    // Change the page title when switching routes
    document.querySelector('title').innerHTML = to.name
    // Statistics code
    if (to.path) _czc.push(['_trackPageview'.'/ #' + to.fullPath], ' ')
    next()
  }
})

// Route changes reconfigure wechat sharing
router.afterEach(to= > {
  // wxConfig(() => updateShare())
})

// socket. IO initialization
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 }
})

Copy the code

The server end 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('Database initialization... ')
  await connectDatabase()
  initAllSchema()
  await initDefaultUser()

  const app = new Koa()

  console.log('mount socket. IO... ')
  const server = require('http').Server(app.callback())
  const io = require('socket.io').listen(server)
  require('./socket')(io)

  // Expose that IO can be pushed elsewhere
  module.exports.io = io

  console.log('Mount middleware... ')
  useMiddlewares(app)

  console.log('Initialize a scheduled task... ')
  // Do you want to wrap it?
  require('./tools/crawlMovie')
  require('./tools/crawlCoin')

  server.listen(config.server.PORT, () => {
    console.log('Listening' + config.server.PORT + 'port... ')})}) ()Copy the code