vue-music 兼容性调整

发表于 2017-09-21

前段时间学习vue的时候做了一个music webapp；对遇到的兼容性问题做一个总结

特性/兼容性	UC	QQ	Chrome	WebView	QQ内建	微信内建
filter:blur()	不支持	支持，但是卡顿	√	√	√	√
`<input type='range'/>`自定义样式	不支持	支持	√	√	√	√
animation	不支持reverse，keyframe需要@-webkit前缀	√，keyframe需要@-webkit前缀	√	√	√	√
flex	只支持box-flex的老式写法	只支持box-flex的老式写法	√	√	√	√

阅读全文 »

socket.io 的使用

发表于 2017-09-21

首先配置好服务器

...
... //前面省略
...
var server = app.listen(app.get('port'), function() {
    console.log('node 正在运行，端口:'+app.get('port'));
});
var io = require('socket.io')(server, {
    pingTimeout: 5000,
    pingInterval: 10000
})
io.on('connection', function(socket) {
    console.log(socket.id)
    socket.on('disconnect', () => {
        for(var i in oSocketIDs) {
            if(oSocketIDs[i] === socket.id) {
                delete(oSocketIDs[i]);
            }
        }
        delete(oSockets[socket.id])
    })
    socket.on('chat message',(msg, fn) => {
        io.emit('chat message', msg);
        fn('success')
    })
})

然后客户端需要配置socket

<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  <!-- 如果socket.io.js 和服务器不在一个域下面，则需要指定详细地址 -->
  <!-- <script src='http://localhost:8888/socket.io/socket.io.js'></script> -->
  <script>
      var socket = io();
    //   如果socket.io.js 和服务器不在一个域下面，则需要指定详细地址
    //  var socket = io('http://localhost:8888')
      $('form').submit(function(event) {
          event.preventDefault();
          socket.emit('chat message', $('#m').val());
          return false;
      });
      socket.on('chat message', function(msg) {
          $('#messages').append($('<li>').text(msg));
      })
      $.ajax({
          url: '/test',
          type: 'get',
          data: {param1: 'value1'}
      })
      .done(function() {
          console.log("success");
      })
      .fail(function() {
          console.log("error");
      })
      .always(function() {
          console.log("complete");
      });
  </script>
</body>

客户端手动断开socket, 使用socket.close(); 手动重连socket.open();
socket监听事件,使用socket.on();
服务端广播消息，io.emit:广播全部包括自己， socket.broadcast.emit: 广播全部不包括自己

socket.io 实现点对点发送消息

实现方式：在io.on(‘connection’)的时候，所有的socket按照某种关键字保存起来, 比如一个对象oSockets。做{username: socket} 的对应关系。然后在服务器端监听到某个私有消息事件的时候，根据客户端指定的username，选择oSockets[username].emit(…)就行了

阅读全文 »

一份完整的express4后台配置

发表于 2017-09-21

备份一个express4 的后台配置，省的每次都要去重写一遍

阅读全文 »

nodeJS 设置跨域响应头

发表于 2017-09-21

app.use(function(req, res, next) {
    console.log('hostname:' + req.hostname)
    var allowOrigins = [
        'http://www.linyqiang.com',
        "http://localhost:3000",
        'http://192.168.1.101:3000'
    ];
    var origin = req.headers.origin;
    if (allowOrigins.indexOf(origin) > -1 || /(\b|.*\.)linyqiang.com$/.test(origin) === true) {
        // 如果req.headers.origin 在 allowOrigin 里面，则指定origin可以跨域
        res.setHeader('Access-Control-Allow-Origin', origin);
    } else {
        res.setHeader('Access-Control-Allow-Origin', '*');
    }
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,DELET,POST');
    res.header('Access-Control-Allow-Headers', 'Content-Type,x-access-token,Access-Control-Allow-Headers, Authorization, X-Requested-With');
    next();
})

分开指定res.setHeader('Access-Control-Allow-Origin', origin); 和res.setHeader('Access-Control-Allow-Origin', '*');

阅读全文 »

nodeJS 文件上传与下载

发表于 2017-09-21

nodeJS 文件上传

express 下使用body-parser是无法解析multipart/form-data的内容的，如果客户端发来文件内容，使用body-parser中间件是看不到文件的

此时需要引入multer模块，npm install multer -S

var bodyParser = require('body-parser');
var upload = require('multer')({
    dest: 'uploads/' //指定文件上传后存放的位置
})
var app = require('express')();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.listen('8888', function() {
    console.log('.....')
});
app.post('/uploads',upload.any(), function(req, res) {
    console.log(req.fields);
    console.log(req.files); // 此时可以在req.files 已上传内容的信息了
    console.log(req.body);
})

客户端使用FormData上传file Object

<form id="up" name="up" enctype="multipart/form-data" method="POST">
    <input type="file" name="file" id="file"/>
    <input type="submit" id="submit"  />
</form>
<script>
    var form = document.getElementById('up');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        var data = new FormData(form);
        console.log(data);
        var en = data.entries();
        console.log(en);
        for(var pair of en) {
            console.log(pair);
        }
        xhr.open('post','http://localhost:8888/upload',true);
        xhr.send(data);
    })
</script>

阅读全文 »