Vue+Koa2+mongoose写一个像素绘板的实现方法

# centos 前置条件sudo yum install gcc-c++ cairo cairo-devel pango-devel libjpeg-turbo-devel giflib-devel# 安装本体yarn add canvas -D

const { createCanvas, createImageData} = require('canvas')const canvas = createCanvas(canvasWidth, canvasHeight)const ctx = canvas.getContext('2d')// 初始化const init = callback => { Dot.queryDots().then(data => {  let imgData = new createImageData(   Uint8ClampedArray.from(data),   canvasWidth,   canvasHeight  )  // 移除 Smooth  ctx.mozImageSmoothingEnabled = false  ctx.webkitImageSmoothingEnabled = false  ctx.msImageSmoothingEnabled = false  ctx.imageSmoothingEnabled = false  ctx.putImageData(imgData, 0, 0, 0, 0, canvasWidth, canvasHeight)  successLog('canvas render complete !')  callback() })}

// socket.io init// transports: [ 'websocket' ]window.socket = io.connect(window.location.origin.replace(/https/, 'wss'))// 接收图片window.socket.on('dataUrl', data => { this.imageObject.src = data.url this.loadInfo.push('渲染图像...') this.init()})// 接收其他用户建点window.socket.on('newDot', data => { this.saveDot(  {   x: data.index % this.width,   y: Math.floor(data.index / this.width),   color: data.color  },  false )})// 接收所有人的最新推送消息window.socket.on('newChat', data => { if (this.msgs.length === 50) {  this.msgs.shift() } this.msgs.push(data)})

let http = require('http');let io = require('socket.io')let server = http.createServer(app.callback())let ws = io.listen(server)server.listen(port)ws.on('connection', socket => { // 建立连接的 client 加入房间 chatroom ，为了下方可以广播 socket.join('chatroom') socket.emit('dataUrl', {  url: cv.getDataUrl() }) socket.on('saveDot', async data => {  // 推送给其他用户，即广播  socket.broadcast.to('chatroom').emit('newDot', data)  saveDotHandle(data) }) socket.on('newChat', async data => {  // 推送给所有用户  ws.sockets.emit('newChat', data)  newChatHandle(data) })})

# 获得程序git clone https://github.com/letsencrypt/letsencryptcd letsencrypt# 自动生成证书(环境安装完毕后会有两次确认),证书目录 /etc/letsencrypt/live/{输入的第一个域名} 我这里是 /etc/letsencrypt/live/www.luwuer.com/./letsencrypt-auto certonly --standalone --email html6@foxmail.com -d www.luwuer.com -d luwuer.com

# 进入定时任务编辑crontab -e# 提交申请，我这里设置每两月一次，过期时间为三月* * * */2 * cd /root/certificate/letsencrypt && ./letsencrypt-auto certonly --renew

yum install -y nginx

server { # 使用 HTTP/2，需要 Nginx1.9.7 以上版本 listen 443 ssl http2 default_server; # 开启HSTS，并设置有效期为“6307200秒”（6个月），包括子域名(根据情况可删掉)，预加载到浏览器缓存(根据情况可删掉) add_header Strict-Transport-Security "max-age=6307200; preload"; # add_header Strict-Transport-Security "max-age=6307200; includeSubdomains; preload"; # 禁止被嵌入框架 add_header X-Frame-Options DENY; # 防止在IE9、Chrome和Safari中的MIME类型混淆攻击 add_header X-Content-Type-Options nosniff; # ssl 证书 ssl_certificate /etc/letsencrypt/live/www.luwuer.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/www.luwuer.com/privkey.pem; # OCSP Stapling 证书 ssl_trusted_certificate /etc/letsencrypt/live/www.luwuer.com/chain.pem; # OCSP Stapling 开启，OCSP是用于在线查询证书吊销情况的服务，使用OCSP Stapling能将证书有效状态的信息缓存到服务器，提高TLS握手速度 ssl_stapling_verify on; #OCSP Stapling 验证开启 ssl_stapling on;  #用于查询OCSP服务器的DNS  resolver 8.8.8.8 8.8.4.4 valid=300s; # DH-Key交换密钥文件位置 ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # 指定协议 TLS ssl_protocols TLSv1 TLSv1.1 TLSv1.2;  # 加密套件,这里用了CloudFlare's Internet facing SSL cipher configuration ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5; # 由服务器协商最佳的加密算法 ssl_prefer_server_ciphers on; server_name ~^(/w+/.)?(luwuer/.com)$; # $1 = 'blog.' || 'img.' || '' || 'www.' ; $2 = 'luwuer.com' set $pre $1; if ($pre = 'www.') {  set $pre ''; } set $next $2;  root /root/apps/$pre$next; location / {  try_files $uri $uri/ /index.html;  index index.html; } location ^~ /api/ {  proxy_pass http://43.226.147.135:3000/;  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }  # socket代理配置 location /socket.io/ {  proxy_pass http://43.226.147.135:3000;  proxy_http_version 1.1;  proxy_set_header Upgrade $http_upgrade;  proxy_set_header Connection "upgrade"; } # location /weibo/ { #   proxy_pass https://api.weibo.com/; # } include /etc/nginx/utils/cache.conf;}server { listen 80; server_name www.luwuer.com; rewrite ^(.*)$ https://$server_name$request_uri;}

const mongoose = require('mongoose')let schema = new mongoose.Schema({ index: {  type: Number,  index: true }, r: Number, g: Number, b: Number}, { collection: 'dots'})