v1.0

src/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

src/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

src/.eslintignore

@@ -0,0 +1,4 @@
+/build/
+/config/
+/dist/
+/*.js

src/.eslintrc.js

@@ -0,0 +1,29 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential', 
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

src/.gitignore

@@ -0,0 +1,19 @@
+# Build and Release Folders
+bin-debug/
+bin-release/
+[Oo]bj/
+[Bb]in/
+
+# Other files and folders
+.settings/
+
+# Executables
+*.swf
+*.air
+*.ipa
+*.apk
+
+# Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties`
+# should NOT be excluded as they contain compiler settings and other important
+# information for Eclipse / Flash Builder.
+node_modules

src/.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

src/build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

src/build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

src/build/utils.js

@@ -0,0 +1,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

src/build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

src/build/webpack.base.conf.js

@@ -0,0 +1,96 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.scss$/,
+        loader: ['style', 'css', 'sass']
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

src/build/webpack.dev.conf.js

@@ -0,0 +1,95 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

src/build/webpack.prod.conf.js

@@ -0,0 +1,145 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: false,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

src/config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

src/config/index.js

@@ -0,0 +1,76 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

src/config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
+    <title>Welcome to minChat</title>
+    <link rel="stylesheet" href="static/css/face.css">
+    <script src="static/js/face.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "vue-min-chat",
+  "version": "1.0.0",
+  "description": "一个vue.js + Element UI + node.js + socket.io + mysql在线聊天室项目",
+  "author": "weilin-liao@qq.com",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "lint": "eslint --ext .js,.vue src",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "element-ui": "^2.13.0",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1",
+    "vue-socket.io": "^3.0.7"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^8.2.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "eslint": "^4.15.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "node-notifier": "^5.1.2",
+    "node-sass": "^4.14.1",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "sass-loader": "^7.3.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/server/README.md

@@ -0,0 +1 @@
+[dingtalk-robot-sender](https://www.npmjs.com/package/dingtalk-robot-sender)

src/server/config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  Mysql: {
+    host: '127.0.0.1',
+    user: 'root',
+    password: 'root',
+    database: 'minChat'
+  },
+  Robot: {
+    baseUrl: 'https://oapi.dingtalk.com/robot/send',
+    accessToken: 'xxxxxxxxxx',
+    secret: 'xxxxxxxxx'
+  }
+}

src/server/index.js

@@ -0,0 +1,281 @@
+var http = require('http')
+var express = require('express')
+var server = http.Server(express())
+var io = require('socket.io')(server, { cors: true })
+var Tools = require('./tools')
+var Config = require('./config')
+const ChatBot = require('dingtalk-robot-sender')
+
+const robot = new ChatBot(Config.Robot)
+const at = {
+   "atMobiles": [
+    "15770705548"
+  ], 
+  "isAtAll": false
+}
+
+// 联系人列表
+var concats = {
+  body: [
+    {
+      id: 'group',
+      nickName: '聊天室',
+      avatar: './static/avatar/group.png',
+      message: {
+        content: '',
+        time: Tools.dateTime()
+      }
+    },
+    {
+      id: 'robots',
+      nickName: 'Hello',
+      avatar: './static/avatar/robots.png',
+      message: {
+        content: '',
+        time: Tools.dateTime()
+      }
+    }
+  ],
+  onLine: {}
+}
+io.on('connection', function(socket) {
+  // 登录
+  socket.on('LOGIN', function(res) {
+    let id = socket.id
+    let body = res.body
+    let nickName = body.nickName
+
+    // socket ID
+    body.id = id
+    // 修改时间
+    body.message.time = Tools.dateTime()
+    // 名称是否重复
+    for (var i = 0; i < concats.body.length; i ++) {
+      if (nickName == concats.body[i].nickName) {
+        socket.emit('LOGIN_SUCCESS', {
+          code: 0,
+          msg: '名称已被使用请重新填写！'
+        })
+        return false
+      }
+    }
+
+    /**
+     * 登录成功
+     */
+    concats.onLine[id] = socket
+    // 发送登录成功通知
+    socket.emit('LOGIN_SUCCESS', {
+      code: 2,
+      body: body,
+      msg: '登陆成功！'
+    })
+
+    /**
+     * 发送联系人列表给客户端
+     */
+    socket.emit('conCats', {
+      code: 2,
+      body: concats.body
+    })
+	
+    /**
+     * 告诉客户端有人跑进来了
+     */
+    body.notify = nickName + '进入聊天室'
+    io.emit('onLine', {
+      code: 2,
+      body: body,
+      lineCount: Tools.getLineCount(concats) + 1
+    })
+
+    // 删除通知字段
+    delete body.notify
+    // 插入联系人列表
+    concats.body.push(body)
+
+    console.log(`憨憨[${id}]进来了--->当前在线${Tools.getLineCount(concats)}人`)
+	robot.text(`👉${nickName}👈 进入聊天室\n当前在线${Tools.getLineCount(concats)}人`, at)
+
+    // 沉默憨憨给进来的憨憨发消息
+    setTimeout(() => {
+      concats.onLine[id].emit('MESSAGE', {
+        id: "robots",
+        type: 'server-message',
+        body: {
+          type: "server",
+          gotoId: "robots",
+          fromId: "robots",
+          avatar: concats.body[1].avatar,
+          nickName: concats.body[1].nickName,
+          message: {
+            time: Tools.dateTime(),
+            content: `欢迎！`
+          }
+        }
+      })
+    }, 1000)
+  })
+
+  /**
+   * 用户断开
+   */
+  socket.on('disconnect', function() {
+    let id = socket.id
+
+    // 删除断开用户
+    concats.body.map((item, key) => {
+      if(item.id == id) {
+        let avatar = item.avatar
+        let nickName = item.nickName
+        // 删除在线人员
+        delete concats.onLine[id]
+        // 删除好友列表
+        concats.body.splice(key, 1)
+
+        // 告诉客户端有人跑了
+        io.emit('onLine', {
+          code: 1,
+          body: {
+            id: id,
+            avatar: avatar,
+            nickName: nickName,
+            notify: nickName + '离开聊天室'
+          },
+          lineCount: Tools.getLineCount(concats)
+        })
+		robot.text(`👉${nickName}👈离开聊天室\n当前在线${Tools.getLineCount(concats)}人`, at)
+        console.log(`憨憨[${id}]跑了--->当前在线${Tools.getLineCount(concats)}人`)
+      }
+    })
+  })
+  
+  /**
+   * 接收消息
+   */
+  socket.on('MESSAGE', function(message) {
+    let type = message.type
+    let body = message.body
+    let gotoId = body.gotoId
+    let fromId = body.fromId
+    
+    message.type = 'server-message'
+    message.body.type = 'server'
+
+    // 机器人
+    if (type == 'robots-message') {
+      let content = body.message.textContent
+      robot.text(`${body.nickName}：${content}`)
+      let url = encodeURI(`http://api.qingyunke.com/api.php?key=free&appid=0&msg=${content}`)
+      console.log(message)
+      message.id = gotoId
+      message.body.gotoId = fromId
+      message.body.fromId = gotoId
+      message.body.avatar = concats.body[1].avatar
+      message.body.nickName = concats.body[1].nickName
+
+      // 请求青云客api接口
+      http.get(url, res => {
+        const { statusCode } = res
+
+        if (statusCode == 200) {
+          let rawData = ''
+
+          res.on('data', chunk => {
+            rawData += chunk
+          })
+
+          res.on('end', () => {
+            try {
+              const parsedData = JSON.parse(rawData)
+              let content = parsedData.content
+              
+              // 表情替换
+              if (content.indexOf('face') != -1) {
+                let arr = content.split(/[{]|[}]/g)
+                let index = arr[1].split(':')[1]
+                // 接收的表情范围99, 超过的不显示
+                if(index < 99) {
+                  content = content.replace(content, `${arr[0]}<span class="face face${index}"></span>${arr[2]}`)
+                } else {
+                  content = content.replace(content, `${arr[0]}${arr[2]}`)
+                }
+              }
+              message.body.message.content = content
+            } catch (e) {
+              console.error(e.message)
+            }
+          })
+        } else {
+          message.body.message.content = '接口出现问题了，等下再来找我！'
+        }
+        // 修改时间
+        message.body.message.time = Tools.dateTime()
+
+        setTimeout(() => {
+          console.log('----------------robot----------------')
+          console.log(message)
+          console.log('-----------------------------------------')
+          // 发送消息给客户端
+          concats.onLine[fromId].emit('MESSAGE', message)
+          robot.text(`robot：${message.body.message.content}`)
+        }, 0)
+      }).on('error', (e) => {
+        console.error(`出现错误: ${e.message}`)
+      })
+
+    // 聊天室
+    } else if (type == 'group-message'){
+      const post = [
+        'group-message',
+        JSON.stringify(message.body)
+      ]
+
+      // 插入数据库
+      Tools.database('INSERT INTO group_message(Id,type,body) VALUES(0,?,?)', post, result => {
+        if (result) {
+          console.log(`收到群聊消息【${message.body.message.textContent}】已插入数据库`)
+        }
+      })
+      io.emit('MESSAGE', message)
+    // 一对一聊天
+    } else {
+      message.id = fromId
+      message.body.fromId = gotoId
+      message.body.gotoId = fromId
+	  console.log(message)
+      concats.onLine[gotoId].emit('MESSAGE', message)
+    }
+  })
+
+  /**
+   * 查看更多消息
+   */
+  socket.on('QUERY_PAGE', response => {
+    let id = response.id
+    let limit = 10
+    let page = response.page
+    let length = response.length
+    let sql = `SELECT * FROM group_message ORDER BY ID DESC LIMIT ${(page - 1) * limit},${limit}`
+
+    // 查询数据
+    Tools.database(sql, false, result => {
+      if (id) {
+        if (length && result != '') result = result.slice(length)
+        concats.onLine[id].emit('GROUP_MESSAGE', result)
+		/**
+        console.log(`----------------第${page}页----------------`)
+        console.log(result)
+        console.log('------------------------------------')
+		**/
+      }
+    })
+  })
+})
+
+/**
+ * 开启服务
+ */
+server.listen(4001, function() {
+  console.log('goto href：', 'http://localhost:4001')
+})

src/server/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "vue-min-chat",
+  "version": "1.0.0",
+  "description": "a vue.js minChat project!",
+  "main": "index.js",
+  "scripts": {
+    "dev": "supervisor index.js",
+    "serve": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "weilin-liao@qq.com",
+  "license": "ISC",
+  "dependencies": {
+    "dingtalk-robot-sender": "^1.2.0",
+    "express": "^4.17.1",
+    "mongodb": "^3.5.2",
+    "mysql": "^2.18.1",
+    "socket.io": "^2.3.0"
+  }
+}

src/server/tools.js

@@ -0,0 +1,50 @@
+var mysql = require('mysql')
+var Config = require('./config.js')
+
+const Tools = {
+  /**
+   * 获取当前时间
+   */
+  dateTime() {
+    return new Date().getTime()
+  },
+  /**
+   * 获取在线人数
+   */
+  getLineCount(concats) {
+    return concats.body.length - 2
+  },
+  /**
+   * mysql
+   */
+  database(sql, values, fn) {
+    const db = mysql.createConnection(Config.Mysql)
+
+    db.connect(err => {
+      if (err) throw err
+    })
+
+    if (values) {
+      // 插入数据
+      db.query(sql, values, function (err, result) {
+        if (err) {
+          console.log('插入数据库出错：', err)
+        } else {
+          fn(result)
+        }
+      })
+    } else {
+      // 查询数据
+      db.query(sql, function (err, result) {
+        if (err) {
+          console.log('查询数据库出错：', err)
+        } else {
+          fn(result)
+        }
+      })
+    }
+    db.end()
+  }
+}
+
+exports = module.exports = Tools

src/src/App.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+ul,ol {
+  list-style: none;
+}
+
+.el-notification__content {
+  margin-top: 20px;
+  p {
+    display: flex;
+  }
+  .notify-image {
+    margin-right: 10px;
+    width: 50px;
+    height: 50px;
+  }
+  .notify-content {
+    .notify-title {
+      display: block;
+      margin-bottom: 2px;
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  padding-right: 4px;
+  background-color:#f8f8f8;
+}
+::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  background-color: #c6c6c6;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  background-color: #f8f8f8;
+}
+</style>

src/src/assets/data.json

@@ -0,0 +1,34 @@
+{
+  "avatars": [
+    "./static/avatar/avatar_01.jpg",
+    "./static/avatar/avatar_02.jpg",
+    "./static/avatar/avatar_03.jpg",
+    "./static/avatar/avatar_04.jpg",
+    "./static/avatar/avatar_05.jpg",
+    "./static/avatar/avatar_06.jpg",
+    "./static/avatar/avatar_07.jpg",
+    "./static/avatar/avatar_08.jpg",
+    "./static/avatar/avatar_09.jpg",
+    "./static/avatar/avatar_10.jpg",
+    "./static/avatar/avatar_11.jpg",
+    "./static/avatar/avatar_12.jpg",
+    "./static/avatar/avatar_13.jpg",
+    "./static/avatar/avatar_14.jpg",
+    "./static/avatar/avatar_15.jpg",
+    "./static/avatar/avatar_16.jpg",
+    "./static/avatar/avatar_17.jpg",
+    "./static/avatar/avatar_18.jpg",
+    "./static/avatar/avatar_19.jpg",
+    "./static/avatar/avatar_20.jpg",
+    "./static/avatar/avatar_21.jpg",
+    "./static/avatar/avatar_22.jpg",
+    "./static/avatar/avatar_23.jpg",
+    "./static/avatar/avatar_24.jpg",
+    "./static/avatar/avatar_25.jpg",
+    "./static/avatar/avatar_26.jpg",
+    "./static/avatar/avatar_27.jpg",
+    "./static/avatar/avatar_28.jpg",
+    "./static/avatar/avatar_29.jpg",
+    "./static/avatar/avatar_30.jpg"
+  ]
+}

src/src/assets/eventBus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export default new Vue()

src/src/assets/tools.js

@@ -0,0 +1,19 @@
+/**
+ * 返回底部
+ */
+function gotoBottom () {
+  const box = document.getElementsByClassName('message-pabel-box')[0]
+
+  this.$nextTick(() => {
+    box.scrollTop = box.scrollHeight
+  })
+}
+// 关闭窗口
+function close () {
+  window.location.href = ''
+}
+
+export {
+  gotoBottom,
+  close
+}

src/src/components/message-group.vue

@@ -0,0 +1,137 @@
+<template>
+  <ul class="message-item">
+    <li
+      v-for="(item, index) in concats"
+      :key="index"
+      @click="switchGroup(index, item.id)"
+      :class="['message-list', {'message-active': item.active}]">
+
+      <div class="message-left">
+        <el-badge
+          class="item"
+          :max="99"
+          :value="item.message.newMessageCount"
+          :hidden="item.message.isNewMessage ? !item.message.isNewMessage : true">
+          <img class="message-avatar" :src="item.avatar">
+        </el-badge>
+      </div>
+
+      <div class="message-right">
+        <div class="message-header">
+          <div class="message-title">{{item.nickName}}</div>
+          <div class="message-time">{{item.message.time | formatTime}}</div>
+        </div>
+        <div class="message-content" v-html="item.message.content"></div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { gotoBottom } from '@/assets/tools'
+
+export default {
+  name: 'Message',
+  props: {
+    concats: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      gotoBottom: gotoBottom
+    }
+  },
+  methods: {
+    /**
+     * 切换联系对象
+     */
+    switchGroup (index, id) {
+      let concats = this.concats
+      // 隐藏所有
+      concats.map(item => {
+        item.active = false
+      })
+      this.gotoBottom()
+      // 显示当前点击的
+      concats[index].active = true
+      this.$forceUpdate()
+      // 传递给父级
+      this.$emit('switchGroup', index, id)
+    }
+  },
+  /**
+   * time:mins
+   */
+  filters: {
+    formatTime (time) {
+      let date = new Date(time)
+      let hours = date.getHours()
+      let minutes = date.getMinutes()
+      if (hours < 10) {
+        hours = `0${hours}`
+      }
+      if (minutes < 10) {
+        minutes = `0${minutes}`
+      }
+      return `${hours}:${minutes}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.message-active {
+  background: rgba(255, 255, 255, .4);
+}
+.message-item {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  .message-list {
+    display: flex;
+    padding: 10px 15px;
+    width: 100%;
+    height: 62px;
+    font-size: 12px;
+    box-sizing: border-box;
+    &:hover {
+      background: rgba(255, 255, 255, .4);
+    }
+    .message-left {
+      margin-right: 10px;
+      font-size: 0;
+      .message-avatar {
+        width: 40px;
+        height: 40px;
+      }
+      .message-group {
+        border: 1px solid #dedede;
+        box-sizing: border-box;
+      }
+    }
+    .message-right {
+      flex: 1;
+      overflow: hidden;
+      .message-header {
+        display: flex;
+        justify-content: space-between;
+        .message-title {
+          width: 100%;
+          font-size: 14px;
+        }
+        .message-time {
+          color: #aaaaaa;
+        }
+      }
+      .message-content {
+        margin-top: 4px;
+        color: #999999;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+</style>

src/src/components/message-input.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="message-input-box">
+    <div class="input-tools">
+      <i slot="reference" class="el-icon-s-opportunity" title="表情"></i>
+    </div>
+
+    <el-input
+      type="textarea"
+      resize="none"
+      :autosize="{ minRows: 3, maxRows: 3}"
+      v-model="textArea"
+      v-on:keyup.native="keyUp">
+    </el-input>
+
+    <div class="footer-tools">
+      <el-button
+        size="mini"
+        type="primary"
+        @click="sendMessage"
+        class="send-button">
+        发送/Send
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Bus from '@/assets/eventBus'
+import { gotoBottom } from '@/assets/tools'
+
+export default {
+  data () {
+    return {
+      textArea: '',
+      gotoBottom: gotoBottom
+    }
+  },
+  props: {
+    // 联系人列表
+    concats: {
+      type: Array
+    },
+    // 当前选择的ID
+    nowSwitchId: {
+      type: String
+    },
+    // 当前用户
+    localInfo: {
+      type: Object
+    }
+  },
+  mounted () {
+    // 表情
+    this.obj = new window.Face({
+      el: document.querySelector('.el-icon-s-opportunity'),
+      callBack: face => {
+        this.textArea += `〖${face.title}〗`
+        document.querySelector('.face-warp').style.display = 'none'
+      }
+    })
+  },
+  methods: {
+    /**
+     * 消息类型
+     */
+    nowSwitchType () {
+      if (this.nowSwitchId === 'group') {
+        return 'group-message'
+      } else if (this.nowSwitchId === 'robots') {
+        return 'robots-message'
+      } else {
+        return 'user-message'
+      }
+    },
+
+    /**
+     * 消息过滤
+     */
+    textAreaTran () {
+      return this.textArea.replace(/\n/g, '').replace(new RegExp('<', 'gm'), '&lt')
+    },
+
+    /**
+     * 检测空白
+     */
+    blankTesting () {
+      if (this.textArea.replace(/\s+/g, '') === '') {
+        this.$alert('不能发送空白消息', '提示', {
+          confirmButtonText: '确定'
+        })
+        return false
+      }
+      return true
+    },
+
+    /**
+     * 按Enter发送消息
+     */
+    keyUp (event) {
+      if (event.key === 'Enter') {
+        this.sendMessage()
+      }
+    },
+
+    /**
+     * 发送消息
+     */
+    sendMessage () {
+      let message = {
+        // 类型
+        type: this.nowSwitchType(),
+        // 发送者ID
+        id: this.localInfo.id,
+        body: {
+          // 消息类型
+          type: 'user-message',
+          // 收者ID
+          gotoId: this.nowSwitchId,
+          // 发送者ID
+          fromId: this.localInfo.id,
+          // 发送者头像
+          avatar: this.localInfo.avatar,
+          // 发送者昵称
+          nickName: this.localInfo.nickName,
+          message: {
+            // 发送时间
+            time: +new Date(),
+            // 内容带标签
+            content: this.obj.replaceFace(this.textAreaTran()),
+            // 纯内容不带标签
+            textContent: this.textAreaTran()
+          }
+        }
+      }
+      if (this.blankTesting()) {
+        // 发送服务器
+        this.$socket.emit('MESSAGE', message)
+        // 传递至同级
+        Bus.$emit('MESSAGE', message)
+        // 消息清空
+        this.textArea = ''
+        // 消息置底
+        this.gotoBottom()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.message-input-box {
+  height: 150px;
+  background-color: rgba(255, 255, 255, .85);
+  border-top: 1px solid #dddddd;
+  .input-tools {
+    position: relative;
+    padding-left: 10px;
+    padding-top: 10px;
+    .upload-demo {
+      display: inline;
+    }
+    i {
+      margin-left: 10px;
+      color: rgb(94, 94, 94);
+      font-size: 20px;
+      cursor: pointer;
+    }
+  }
+  .el-textarea {
+    .el-textarea__inner {
+      padding: 5px 20px;
+      border-radius: 0;
+      border: 0;
+      background-color: transparent;
+    }
+  }
+  .footer-tools {
+    text-align: right;
+    .send-button {
+      padding: 7px 10px;
+      margin-right: 20px;
+      background: #377ec8;
+    }
+  }
+}
+.face-pabel {
+  .face {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+  }
+}
+</style>

src/src/components/message-pabel.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="message-pabel-box">
+
+    <el-button
+      class="eye-more"
+      @click="eyeMore"
+      v-if="nowSwitchId == 'group' && isShowMore"
+      type="text">加载更多消息</el-button>
+
+    <ul class="message-styles-box">
+      <li
+        v-for="(item, index) in messageTemplate()"
+        :key="index"
+        :class="judgeClass(item.type)">
+
+        <img class="message-avatar"
+          :src="item.avatar ? item.avatar : './static/avatar/avatar_14.jpg'"
+          :alt="item.nickName ? item.nickName : 'Hello'">
+
+        <p class="message-nickname" v-if="item.type == 'server'">{{item.nickName}} {{formatTime(item.message.time)}}</p>
+        <p class="message-nickname" v-else>{{formatTime(item.message.time)}} {{item.nickName}}</p>
+        <p class="message-classic" v-html="item.message.content"></p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Bus from '@/assets/eventBus'
+import { gotoBottom } from '@/assets/tools'
+
+export default {
+  name: 'MessagePabel',
+  props: {
+    // 选择的联系人ID
+    nowSwitchId: {
+      type: String
+    },
+    // 当前用户
+    localInfo: {
+      type: Object
+    },
+    concats: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      message: {},
+      page: 0,
+      isShowMore: true,
+      gotoBottom: gotoBottom
+    }
+  },
+  mounted () {
+    /**
+     * 接收消息
+     */
+    this.sockets.subscribe('MESSAGE', message => {
+      let id = message.id
+      let gotoId = message.body.gotoId
+      let fromId = message.body.fromId
+      let content = message.body.message.content
+
+      message.body.message.content = content.replace(/[{]/g, '<').replace(/[}]/g, '>')
+
+      this.initMessageArray(gotoId, fromId)
+
+      // 用户在群聊发消息
+      if (gotoId === 'group' && fromId === this.localInfo.id) {
+        message.body.type = 'user-message'
+      }
+
+      if (gotoId === 'group') {
+        this.message['group'].push(message.body)
+      } else {
+        this.message[id].push(message.body)
+      }
+      this.$forceUpdate()
+      this.gotoBottom()
+      // 把消息传给父级
+      this.$emit('message', message)
+    })
+
+    /**
+     * 当前用户发的消息
+     */
+    Bus.$on('MESSAGE', response => {
+      let body = response.body
+      let gotoId = body.gotoId
+      let fromId = body.fromId
+
+      this.initMessageArray(gotoId, fromId)
+
+      // 自己给自己发消息
+      if (gotoId === fromId) {
+        this.message[fromId].push(body)
+      } else if (response.type === 'robots-message' || response.type === 'user-message') {
+        this.message[gotoId].push(body)
+      }
+      this.$forceUpdate()
+      // 把消息传给父级
+      this.$emit('message', response)
+    })
+
+    /**
+     * 接收更多消息
+     */
+    this.sockets.subscribe('GROUP_MESSAGE', result => {
+      const box = document.getElementsByClassName('message-pabel-box')[0]
+      const scroll = box.scrollHeight - box.scrollTop
+
+      // 是否有更多数据
+      if (result.length) {
+        result.map((item, index) => {
+          this.message['group'].unshift(JSON.parse(item.body))
+        })
+      } else {
+        this.isShowMore = false
+      }
+
+      if (result.length < 9) this.isShowMore = false
+
+      setTimeout(() => {
+        box.scrollTop = box.scrollHeight - scroll
+      }, 0)
+
+      this.$forceUpdate()
+    })
+  },
+  methods: {
+    /**
+     * 数组初始化
+     */
+    initMessageArray (gotoId, fromId) {
+      let array = this.message
+
+      if (!gotoId) return
+      if (!array[gotoId]) {
+        this.message[gotoId] = []
+      }
+
+      if (!fromId) return
+      if (!array[fromId]) {
+        this.message[fromId] = []
+      }
+    },
+
+    /**
+     * 判断Class
+     */
+    judgeClass (type) {
+      if (type === 'server') {
+        return 'message-layout-left'
+      } else {
+        return 'message-layout-right'
+      }
+    },
+
+    /**
+     * 返回聊天记录集合
+     */
+    messageTemplate () {
+      return this.message[this.nowSwitchId]
+    },
+
+    /**
+     * 查看更多
+     */
+    eyeMore () {
+      let obj = {
+        id: this.localInfo.id,
+        page: this.page += 1
+      }
+      this.initMessageArray('group')
+      if (this.message['group'] !== undefined && this.page === 1) {
+        obj.length = this.message['group'].length
+      }
+      // 发送查询消息
+      this.$socket.emit('QUERY_PAGE', obj)
+    },
+    /**
+     * 获取年月日
+     */
+    formatFullYearMonthDay (date, isShowHourMinute, type) {
+      date = new Date(date)
+      const fullYear = date.getFullYear()
+      const month = date.getMonth() + 1
+      const dayDate = date.getDate()
+      var hours = date.getHours()
+      var minutes = date.getMinutes()
+
+      if (isShowHourMinute) {
+        return `${fullYear}${month}${dayDate}${hours}${minutes}`
+      } else {
+        if (type) {
+          return `${fullYear}${type}${month}${type}${dayDate}`
+        } else {
+          return `${fullYear}${month}${dayDate}`
+        }
+      }
+    },
+    /**
+     * 时间格式化
+     */
+    formatTime (time) {
+      var date = new Date(time)
+      var nowDate = new Date()
+      var hours = date.getHours()
+      var minutes = date.getMinutes()
+
+      hours = hours < 10 ? `0${hours}` : hours
+      minutes = minutes < 10 ? `0${minutes}` : minutes
+
+      if (this.formatFullYearMonthDay(date) === this.formatFullYearMonthDay(nowDate)) {
+        return `${hours}:${minutes}`
+      } else {
+        return `${this.formatFullYearMonthDay(date, false, '/')} ${hours}:${minutes}`
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.message-pabel-box {
+  padding: 0 20px;
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  background: rgba(255, 255, 255, .8);
+
+  .eye-more {
+    width: 100%;
+    padding: 10px 0;
+    font-size: 12px;
+    text-align: center;
+  }
+
+  .message-styles-box {
+    margin-bottom: 20px;
+    .message-layout-left,
+    .message-layout-right {
+      margin-top: 20px;
+      width: 100%;
+      .message-classic::before {
+        content: '';
+        position: absolute;
+        border-width: 8px;
+        border-style: solid;
+      }
+    }
+
+    .message-layout-left {
+      .message-avatar {
+        float: left;
+        margin-right: 10px;
+      }
+      .message-classic {
+        background-color: rgba(255, 255, 255, .8);
+        &::before {
+          left: -16px;
+          border-color: transparent rgba(255, 255, 255, .8) transparent transparent;
+        }
+      }
+    }
+
+    .message-layout-right {
+      text-align: right;
+      .message-avatar {
+        float: right;
+        margin-left: 10px;
+      }
+      .message-classic {
+        text-align: left;
+        color: #ffffff;
+        background-color: rgba(55, 126, 200, .8);
+        &::before {
+          right: -16px;
+          border-color:  transparent transparent  transparent rgba(55, 126, 200, .8);
+        }
+      }
+    }
+
+    .message-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 2px;
+      border: 1px solid #eeeeee;
+    }
+    .message-nickname {
+      color: #777777;
+      font-size: 12px;
+    }
+
+    .message-classic {
+      position: relative;
+      max-width: 45%;
+      margin-top: 5px;
+      display: inline-block;
+      padding: 9px 12px;
+      font-size: 14px;
+      color: #333333;
+      border-radius: 5px;
+      white-space: pre-line;
+      word-break: break-all;
+    }
+  }
+}
+</style>

src/src/main.js

@@ -0,0 +1,50 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import VueSocketIo from 'vue-socket.io'
+import 'element-ui/lib/theme-chalk/index.css'
+import {
+  Button,
+  Input,
+  Icon,
+  Badge,
+  Dialog,
+  Aside,
+  Main,
+  Header,
+  Container,
+  Upload,
+  MessageBox,
+  Notification
+} from 'element-ui'
+
+const wesocket = {
+  debug: false,
+  connection: 'http://localhost:4001'
+}
+
+Vue.use(Icon)
+Vue.use(Input)
+Vue.use(Button)
+Vue.use(Dialog)
+Vue.use(Aside)
+Vue.use(Badge)
+Vue.use(Main)
+Vue.use(Header)
+Vue.use(Upload)
+Vue.use(Container)
+Vue.use(new VueSocketIo(wesocket))
+
+Vue.config.productionTip = false
+Vue.prototype.$notify = Notification
+Vue.prototype.$alert = MessageBox.alert
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

src/src/router.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Index from '@/view/index'
+import Chat from '@/view/chat'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'Index',
+      component: Index
+    },
+    {
+      path: '/chat',
+      name: 'Chat',
+      component: Chat
+    }
+  ]
+})

src/src/view/chat.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="wrapper">
+    <el-container>
+      <el-aside width="250px">
+        <el-header height="40px">
+          <i class="el-icon-user-solid icon-message"></i>
+          <span class="title">联系人</span>
+        </el-header>
+
+        <message-group
+          :concats="concats"
+          @switchGroup="switchGroup" />
+      </el-aside>
+
+      <el-main>
+        <el-header height="40px">
+          <span class="title" v-if="concats[nowSwitch].id == 'group'">聊天室({{lineCount}})人</span>
+          <span class="title" v-else>{{concats[nowSwitch].nickName}}</span>
+        </el-header>
+
+        <message-pabel
+          :concats="concats"
+          :nowSwitchId="nowSwitchId"
+          :localInfo="localInfo"
+          @message="message" />
+
+        <message-input
+          :concats="concats"
+          :localInfo="localInfo"
+          :nowSwitchId="nowSwitchId" />
+      </el-main>
+      <footer class="footer">
+      </footer>
+      <audio id="notify-audio" src="./static/wav/tim.wav"></audio>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import MessageGroup from '@/components/message-group'
+import MessagePabel from '@/components/message-pabel'
+import MessageInput from '@/components/message-input'
+export default {
+  name: 'Chat',
+  data () {
+    return {
+      lineCount: 0,
+      concats: [{
+        id: 0,
+        active: false,
+        nickName: '聊天室',
+        avatar: './static/avatar/group.png',
+        message: {
+          time: 1580572800000,
+          content: 'Welcome'
+        }
+      }],
+      nowSwitch: 0,
+      nowSwitchId: 'group',
+      localInfo: {}
+    }
+  },
+  mounted () {
+    const params = this.$route.params
+
+    /**
+     * 判断是否通过路由跳转过来的
+     */
+    if (params.id) {
+      // 保存当前用户信息
+      this.localInfo = {
+        id: params.id,
+        avatar: params.avatar,
+        nickName: params.nickName
+      }
+    } else {
+      this.goBack()
+    }
+
+    // 历史返回重新登陆
+    if (window.history && window.history.pushState) {
+      history.pushState(null, null, document.URL)
+      window.addEventListener('popstate', this.goBack, false)
+    }
+
+    /**
+     * 获取联系人信息
+     */
+    this.sockets.subscribe('conCats', res => {
+      let body = res.body
+
+      // 默认选中第一个
+      body.map(item => {
+        item.active = false
+      })
+      body[0].active = true
+      this.concats = body
+      this.nowSwitchId = 'group'
+    })
+
+    /**
+     * 获取在线人数及通知
+     */
+    this.sockets.subscribe('onLine', res => {
+      let code = res.code
+      let body = res.body
+      let notify = code === 2 ? '欢迎:)' : ':)'
+      this.$notify({
+        title: '通知',
+        dangerouslyUseHTMLString: true,
+        message: `
+          <img class="notify-image" src="${body.avatar}">
+          <div class="notify-content">
+            <strong class="notify-title">${notify}</strong>
+            <span><strong> ${body.notify} </strong</span>
+          </div>
+        `
+      })
+      // 删除通知
+      delete body.notify
+      // 在线人数
+      this.lineCount = res.lineCount
+      // 添加联系人
+      if (code === 2) {
+        this.concats.push(body)
+      } else {
+        // 如果当前选择的人离开了就选中聊天室
+        if (body.id === this.nowSwitchId) {
+          this.concats[0].active = true
+          this.nowSwitch = 0
+          this.nowSwitchId = 'group'
+          this.concats[0].message.newMessageCount = 0
+          this.concats[0].message.isNewMessage = false
+        }
+        // 删除联系人
+        for (let i = 0; i < this.concats.length; i++) {
+          if (body.id === this.concats[i].id) {
+            this.concats.splice(i, 1)
+          }
+        }
+      }
+    })
+  },
+  methods: {
+    /**
+     * 切换聊天对象
+     */
+    switchGroup (index, id) {
+      this.nowSwitchId = id
+      this.nowSwitch = index
+
+      // 隐藏小红点
+      if (this.concats[index].message.isNewMessage !== undefined) {
+        this.concats[index].message.isNewMessage = false
+        this.concats[index].message.newMessageCount = 0
+      }
+    },
+
+    /**
+     * 接收消息
+     */
+    message (respone) {
+      let type = respone.type
+      let body = respone.body
+      let concats = this.concats
+      let length = concats.length
+      let id = body.gotoId
+      let notifyAudio = document.getElementById('notify-audio')
+
+      // 服务器返回的消息
+      if (type === 'server-message') {
+        if (respone.id === 'robots') {
+          id = 'robots'
+        }
+      }
+
+      // 更新小红点
+      if (this.nowSwitchId !== id) {
+        body.message.isNewMessage = true
+        body.message.newMessageCount = (() => {
+          for (var i = 0; i < length; i++) {
+            if (id === this.concats[i].id) {
+              notifyAudio.play()
+              if (this.concats[i].message.newMessageCount !== undefined) {
+                let count = this.concats[i].message.newMessageCount += 1
+                return count
+              } else {
+                return 1
+              }
+            }
+          }
+        })()
+      }
+
+      // 更新联系人消息
+      for (let i = 0; i < length; i++) {
+        if (concats[i].id === id) {
+          Object.assign(this.concats[i].message, body.message)
+        }
+      }
+    },
+
+    /**
+     * 关闭
+     */
+    goBack () {
+      let href = window.location.href
+      window.location.href = href.split('#')[0]
+    }
+  },
+  components: {
+    MessageGroup,
+    MessagePabel,
+    MessageInput
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  height: 100vh;
+  background-image: url('../assets/img/10.jpg');
+  background-image: url('http://api.btstu.cn/sjbz/zsy.php');
+  background-size: cover;
+  background-repeat: no-repeat;
+  .el-container {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 88%;
+    margin: 30px auto;
+    .el-aside,
+    .el-main {
+      display: flex;
+      flex-direction: column;
+      border-radius: 6px;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    }
+    .el-aside {
+      background: rgba(235, 233, 232, .8);
+    }
+    .el-main {
+      padding: 0;
+      margin-left: 20px;
+    }
+    .el-header {
+      position: relative;
+      line-height: 40px;
+      background: rgb(55, 126, 200);
+      overflow: hidden;
+      .title,
+      .icon-message {
+        color: #ffffff;
+      }
+      .icon-message {
+        font-size: 20px;
+        vertical-align: middle;
+      }
+      .title {
+        display: inline-block;
+        margin-left: 5px;
+        font-size: 16px;
+        letter-spacing: 1px;
+      }
+    }
+  }
+  .footer {
+    position: absolute;
+    bottom: -23px;
+    right: 0;
+    left: 0;
+    margin: auto;
+    font-size: 13px;
+    width: 150px;
+    color: #ffffff;
+    text-align: center;
+    a {
+      color: #ffffff;
+      &:hover {
+        color: #377ec8;
+      }
+    }
+  }
+}
+</style>

src/src/view/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <el-dialog
+    title="Setting chat info"
+    :visible.sync="dialogVisible"
+    :before-close="closeWindow">
+
+    <div class="avatar-box">
+      <el-input
+        placeholder="Your nickName"
+        v-model="nickName"
+        maxlength="8">
+      </el-input>
+      <img :src="avatar || './static/avatar/avatar_01.jpg'" @click="nextAvatar">
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="login">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { avatars } from '@/assets/data'
+import { close } from '@/assets/tools'
+export default {
+  name: 'Index',
+  data () {
+    return {
+      avatar: null,
+      nickName: '',
+      random: 0,
+      dialogVisible: true,
+      closeWindow: close
+    }
+  },
+  mounted () {
+    this.hashAvatar()
+  },
+  methods: {
+    // 随机头像
+    hashAvatar () {
+      let length = avatars.length
+      let random = Math.floor(Math.random() * length)
+      this.random = random
+      this.avatar = avatars[random]
+    },
+    // 下一张头像
+    nextAvatar () {
+      if (this.random === avatars.length) {
+        this.random = 0
+      }
+      this.avatar = avatars[this.random += 1]
+    },
+    login () {
+      let nickName = this.nickName
+      let avatar = avatars[this.random]
+
+      // 未输入名称时随机生成一个
+      if (nickName.replace(/\s+/g, '') === '' || nickName === 'null') {
+        this.nickName = nickName = `路人甲${Math.floor(Math.random() * 123 + Math.random() * 234)}`
+      }
+      // 防止某些表弟手动修改长度
+      if (nickName.length > 8) {
+        this.$alert('你想干嘛？小表弟？', '提示', {
+          confirmButtonText: '确定'
+        })
+        return
+      }
+      // 发送登录消息
+      this.$socket.emit('LOGIN', {
+        type: 'onLine',
+        body: {
+          id: '',
+          avatar: avatar,
+          nickName: nickName,
+          message: {
+            content: '',
+            time: +new Date()
+          }
+        }
+      })
+
+      // 接收登录消息
+      this.sockets.subscribe('LOGIN_SUCCESS', res => {
+        let body = res.body
+        if (!res.code) {
+          this.$alert(res.msg, '提示', {
+            confirmButtonText: '确定'
+          })
+        } else {
+          // 跳转
+          this.$router.push({
+            name: 'Chat',
+            params: {
+              id: body.id,
+              avatar: body.avatar,
+              nickName: body.nickName
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#app {
+  .el-dialog {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 345px;
+    height: 333px;
+    margin: auto !important;
+    .el-dialog__header {
+      .el-dialog__headerbtn {
+        top: 24px;
+      }
+    }
+    .el-dialog__body {
+      padding: 20px;
+    }
+  }
+
+  .avatar-box {
+    text-align: center;
+    .el-input {
+      .el-input__inner {
+        padding: 0 12px;
+        width: 120px;
+        text-align: center;
+      }
+    }
+    img {
+      margin-top: 15px;
+      cursor: pointer;
+      width: 120px;
+      height: 120px;
+    }
+  }
+
+  .el-dialog__footer {
+    padding-top: 0;
+    .dialog-footer {
+      display: block;
+      text-align: center;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #app {
+    .el-container {
+      width: 100%;
+      margin: 0 auto;
+      .el-aside {
+        width: 70px !important;
+        border-radius: 0;
+        .el-header {
+          padding: 0 0;
+          text-align: center;
+          .title {
+            display: none;
+          }
+        }
+        .message-item {
+          .message-list {
+            .message-right {
+              display: none;
+            }
+            .message-left{
+              margin-right: 0;
+            }
+          }
+        }
+      }
+      .el-main {
+        margin-left: 0;
+        border-radius: 0;
+        .message-pabel-box {
+          padding: 0 12px;
+        }
+        .message-styles-box {
+          .message-classic {
+            max-width: 70%;
+          }
+        }
+      }
+    }
+    .el-dialog {
+      width: 80%;
+    }
+  }
+  .face-warp {
+    width: 70%;
+  }
+}
+.el-message-box {
+  width: auto !important;
+}
+</style>

src/static/css/face.css

@@ -0,0 +1,347 @@
+.face-warp{
+    position: absolute;
+    bottom: 73%;
+    background-color: #fff;
+    width: 338px;
+    display: none;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    box-shadow: 0px 0 7px #ccc;
+    padding: 10px;
+}
+.face-panel{
+    list-style: none;
+    padding: 0;
+}
+.face-panel li{
+    float: left;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    padding: 3px;
+}
+.face-panel li:hover{
+    background-color: rgba(162,160,164,0.32);
+}
+.face-panel::after,.face-warp::after{
+    display: block;
+    content: '';
+    clear: both;
+}
+.face:after{
+    display: inline-block;
+    vertical-align: sub;
+    content: "";
+    width: 0;
+    height: 0;
+    font-size: 0;
+    padding: 10px;
+    background: url(../images/face.png) no-repeat;
+}
+.face.face0:after{
+    background-position: -6px -6px;
+}
+.face.face1:after{
+    background-position: -32px -6px;
+}
+.face.face2:after{
+    background-position: -58px -6px;
+}
+.face.face3:after{
+    background-position: -84px -6px;
+}
+.face.face4:after{
+    background-position: -110px -6px;
+}
+.face.face5:after{
+    background-position: -136px -6px;
+}
+.face.face6:after{
+    background-position: -162px -6px;
+}
+.face.face7:after{
+    background-position: -188px -6px;
+}
+.face.face8:after{
+    background-position: -214px -6px;
+}
+.face.face9:after{
+    background-position: -240px -6px;
+}
+.face.face10:after{
+    background-position: -266px -6px;
+}
+.face.face11:after{
+    background-position: -292px -6px;
+}
+.face.face12:after{
+    background-position: -318px -6px;
+}
+.face.face13:after{
+    background-position: -344px -6px;
+}
+.face.face14:after{
+    background-position: -370px -6px;
+}
+/******************************************/
+.face.face15:after{
+    background-position: -6px -32px;
+}
+.face.face16:after{
+    background-position: -32px -32px;
+}
+.face.face17:after{
+    background-position: -58px -32px;
+}
+.face.face18:after{
+    background-position: -84px -32px;
+}
+.face.face19:after{
+    background-position: -110px -32px;
+}
+.face.face20:after{
+    background-position: -136px -32px;
+}
+.face.face21:after{
+    background-position: -162px -32px;
+}
+.face.face22:after{
+    background-position: -188px -32px;
+}
+.face.face23:after{
+    background-position: -214px -32px;
+}
+.face.face24:after{
+    background-position: -240px -32px;
+}
+.face.face25:after{
+    background-position: -266px -32px;
+}
+.face.face26:after{
+    background-position: -292px -32px;
+}
+.face.face27:after{
+    background-position: -318px -32px;
+}
+.face.face28:after{
+    background-position: -344px -32px;
+}
+.face.face29:after{
+    background-position: -370px -32px;
+}
+/***********************************************************/
+/******************************************/
+.face.face30:after{
+    background-position: -6px -58px;
+}
+.face.face31:after{
+    background-position: -32px -58px;
+}
+.face.face32:after{
+    background-position: -58px -58px;
+}
+.face.face33:after{
+    background-position: -84px -58px;
+}
+.face.face34:after{
+    background-position: -110px -58px;
+}
+.face.face35:after{
+    background-position: -136px -58px;
+}
+.face.face36:after{
+    background-position: -162px -58px;
+}
+.face.face37:after{
+    background-position: -188px -58px;
+}
+.face.face38:after{
+    background-position: -214px -58px;
+}
+.face.face39:after{
+    background-position: -240px -58px;
+}
+.face.face40:after{
+    background-position: -266px -58px;
+}
+.face.face41:after{
+    background-position: -292px -58px;
+}
+.face.face42:after{
+    background-position: -318px -58px;
+}
+.face.face43:after{
+    background-position: -344px -58px;
+}
+.face.face44:after{
+    background-position: -370px -58px;
+}
+/*******************************************/
+.face.face45:after{
+    background-position: -6px -84px;
+}
+.face.face46:after{
+    background-position: -32px -84px;
+}
+.face.face47:after{
+    background-position: -58px -84px;
+}
+.face.face48:after{
+    background-position: -84px -84px;
+}
+.face.face49:after{
+    background-position: -110px -84px;
+}
+.face.face50:after{
+    background-position: -136px -84px;
+}
+.face.face51:after{
+    background-position: -162px -84px;
+}
+.face.face52:after{
+    background-position: -188px -84px;
+}
+.face.face53:after{
+    background-position: -214px -84px;
+}
+.face.face54:after{
+    background-position: -240px -84px;
+}
+.face.face55:after{
+    background-position: -266px -84px;
+}
+.face.face56:after{
+    background-position: -292px -84px;
+}
+.face.face57:after{
+    background-position: -318px -84px;
+}
+.face.face58:after{
+    background-position: -344px -84px;
+}
+.face.face59:after{
+    background-position: -370px -84px;
+}
+/******************************************/
+.face.face60:after{
+    background-position: -6px -110px;
+}
+.face.face61:after{
+    background-position: -32px -110px;
+}
+.face.face62:after{
+    background-position: -58px -110px;
+}
+.face.face63:after{
+    background-position: -84px -110px;
+}
+.face.face64:after{
+    background-position: -110px -110px;
+}
+.face.face65:after{
+    background-position: -136px -110px;
+}
+.face.face66:after{
+    background-position: -162px -110px;
+}
+.face.face67:after{
+    background-position: -188px -110px;
+}
+.face.face68:after{
+    background-position: -214px -110px;
+}
+.face.face69:after{
+    background-position: -240px -110px;
+}
+.face.face70:after{
+    background-position: -266px -110px;
+}
+.face.face71:after{
+    background-position: -292px -110px;
+}
+.face.face72:after{
+    background-position: -318px -110px;
+}
+.face.face73:after{
+    background-position: -344px -110px;
+}
+.face.face74:after{
+    background-position: -370px -110px;
+}
+/************************************/
+.face.face75:after{
+    background-position: -6px -136px;
+}
+.face.face76:after{
+    background-position: -32px -136px;
+}
+.face.face77:after{
+    background-position: -58px -136px;
+}
+.face.face78:after{
+    background-position: -84px -136px;
+}
+.face.face79:after{
+    background-position: -110px -136px;
+}
+.face.face80:after{
+    background-position: -136px -136px;
+}
+.face.face81:after{
+    background-position: -162px -136px;
+}
+.face.face82:after{
+    background-position: -188px -136px;
+}
+.face.face83:after{
+    background-position: -214px -136px;
+}
+.face.face84:after{
+    background-position: -240px -136px;
+}
+.face.face85:after{
+    background-position: -266px -136px;
+}
+.face.face86:after{
+    background-position: -292px -136px;
+}
+.face.face87:after{
+    background-position: -318px -136px;
+}
+.face.face88:after{
+    background-position: -344px -136px;
+}
+.face.face89:after{
+    background-position: -370px -136px;
+}
+/**************************************/
+.face.face90:after{
+    background-position: -6px -162px;
+}
+.face.face91:after{
+    background-position: -32px -162px;
+}
+.face.face92:after{
+    background-position: -58px -162px;
+}
+.face.face93:after{
+    background-position: -84px -162px;
+}
+.face.face94:after{
+    background-position: -110px -162px;
+}
+.face.face95:after{
+    background-position: -136px -162px;
+}
+.face.face96:after{
+    background-position: -162px -162px;
+}
+.face.face97:after{
+    background-position: -188px -162px;
+}
+.face.face98:after{
+    background-position: -214px -162px;
+}
+.face.face99:after{
+    background-position: -240px -162px;
+}

src/static/js/face.js

@@ -0,0 +1,58 @@
+(function () {
+  var faceJson=[{"faceID":"face0","title":"微笑"},{"faceID":"face1","title":"撇嘴"},{"faceID":"face2","title":"色"},{"faceID":"face3","title":"发呆"},{"faceID":"face4","title":"得意"},{"faceID":"face5","title":"流泪"},{"faceID":"face6","title":"害羞"},{"faceID":"face7","title":"闭嘴"},{"faceID":"face8","title":"睡"},{"faceID":"face9","title":"大哭"},{"faceID":"face10","title":"尴尬"},{"faceID":"face11","title":"发怒"},{"faceID":"face12","title":"调皮"},{"faceID":"face13","title":"呲牙"},{"faceID":"face14","title":"惊讶"},{"faceID":"face15","title":"难过"},{"faceID":"face16","title":"酷"},{"faceID":"face17","title":"冷汗"},{"faceID":"face18","title":"抓狂"},{"faceID":"face19","title":"吐"},{"faceID":"face20","title":"偷笑"},{"faceID":"face21","title":"可爱"},{"faceID":"face22","title":"白眼"},{"faceID":"face23","title":"傲慢"},{"faceID":"face24","title":"饥饿"},{"faceID":"face25","title":"困"},{"faceID":"face26","title":"惊恐"},{"faceID":"face27","title":"流汗"},{"faceID":"face28","title":"憨笑"},{"faceID":"face29","title":"装逼"},{"faceID":"face30","title":"奋斗"},{"faceID":"face31","title":"咒骂"},{"faceID":"face32","title":"疑问"},{"faceID":"face33","title":"嘘"},{"faceID":"face34","title":"晕"},{"faceID":"face35","title":"折磨"},{"faceID":"face36","title":"衰"},{"faceID":"face37","title":"骷髅"},{"faceID":"face38","title":"敲打"},{"faceID":"face39","title":"再见"},{"faceID":"face40","title":"擦汗"},{"faceID":"face41","title":"抠鼻"},{"faceID":"face42","title":"鼓掌"},{"faceID":"face43","title":"糗大了"},{"faceID":"face44","title":"坏笑"},{"faceID":"face45","title":"左哼哼"},{"faceID":"face46","title":"右哼哼"},{"faceID":"face47","title":"哈欠"},{"faceID":"face48","title":"鄙视"},{"faceID":"face49","title":"委屈"},{"faceID":"face50","title":"快哭了"},{"faceID":"face51","title":"阴险"},{"faceID":"face52","title":"亲亲"},{"faceID":"face53","title":"吓"},{"faceID":"face54","title":"可怜"},{"faceID":"face55","title":"菜刀"},{"faceID":"face56","title":"西瓜"},{"faceID":"face57","title":"啤酒"},{"faceID":"face58","title":"篮球"},{"faceID":"face59","title":"乒乓"},{"faceID":"face60","title":"咖啡"},{"faceID":"face61","title":"饭"},{"faceID":"face62","title":"猪头"},{"faceID":"face63","title":"玫瑰"},{"faceID":"face64","title":"凋谢"},{"faceID":"face65","title":"示爱"},{"faceID":"face66","title":"爱心"},{"faceID":"face67","title":"心碎"},{"faceID":"face68","title":"蛋糕"},{"faceID":"face69","title":"闪电"},{"faceID":"face70","title":"炸弹"},{"faceID":"face71","title":"刀"},{"faceID":"face72","title":"足球"},{"faceID":"face73","title":"瓢虫"},{"faceID":"face74","title":"便便"},{"faceID":"face75","title":"月亮"},{"faceID":"face76","title":"太阳"},{"faceID":"face77","title":"礼物"},{"faceID":"face78","title":"拥抱"},{"faceID":"face79","title":"赞"},{"faceID":"face80","title":"踩"},{"faceID":"face81","title":"握手"},{"faceID":"face82","title":"胜利"},{"faceID":"face83","title":"抱拳"},{"faceID":"face84","title":"勾引"},{"faceID":"face85","title":"拳头"},{"faceID":"face86","title":"差劲"},{"faceID":"face87","title":"爱你"},{"faceID":"face88","title":"NO"},{"faceID":"face89","title":"OK"},{"faceID":"face90","title":"爱情"},{"faceID":"face91","title":"飞吻"},{"faceID":"face92","title":"跳跳"},{"faceID":"face93","title":"发抖"},{"faceID":"face94","title":"怄火"},{"faceID":"face95","title":"转圈"},{"faceID":"face96","title":"磕头"},{"faceID":"face97","title":"回头"},{"faceID":"face98","title":"跳绳"},{"faceID":"face99","title":"挥手"}];
+  window.Face=function(option) {
+      var deafultOpt={
+          el:document.querySelector("body"),
+          callBack:function () {}
+      }
+      deafultOpt=option;
+      this.opt=deafultOpt;
+      this.init();
+  }
+  Face.prototype={
+      Constructor: Face,
+      init:function () {
+          var _this=this;
+          var facePanel=document.createElement("ul");
+          var faceWarp=document.createElement("div");
+          facePanel.className="face-panel";
+          faceWarp.className='face-warp';
+          faceWarp.appendChild(facePanel);
+          _this.opt.el.appendChild(faceWarp);
+          for(var i=0;i<faceJson.length;i++){
+              var face=faceJson[i];
+              var li=document.createElement("li");
+              li.className="face "+face.faceID;
+              li.title=face.title;
+              (function (face) {
+                  li.addEventListener('click',function (e) {
+                      _this.opt.callBack(face,faceWarp);
+                      e.preventDefault()
+                      e.stopPropagation();
+                  });
+              })(face)
+              facePanel.appendChild(li);
+          }
+          _this.opt.el.addEventListener("click",function (e) {
+              faceWarp.style.display="block";
+              e.preventDefault()
+              e.stopPropagation();
+
+          });
+          document.addEventListener("click",function (e) {
+              faceWarp.style.display="none";
+          })
+
+      },
+      replaceFace:function (text) {
+          for(var i=0;i<faceJson.length;i++){
+              var face=faceJson[i];
+              var str="<span class='face "+face.faceID+"' title='"+face.title+"'></span>";
+              var str1='〖'+face.title+'〗';
+              var reg = new RegExp(str1,"g");
+              text=text.replace(reg,str);
+          }
+          return text;
+      }
+  }
+})(window)