标签 - JavaScript 共找到结果 17 条

开发环境配置websocket踢人操作已实现,可上传到生产环境却出错了, 出错的原因是生产环境使用的是https,报错如下: 百度了半天找到结局方法是websocket也用SSL协议,即wss, html页面上的ws

var ws = new WebSocket('ws://blog.mrabit.com');

需要替换成wss:

var ws = new WebSocket('wss://blog.mrabit.com');

原以为这样就完工了,结果又出现报错: 再次百度....... 可以通http模块实现wss代理,需要修改nginx的代理配置,新增配置:

    location /wss {
       proxy_pass http://127.0.0.1:8088/;
       proxy_read_timeout 60s;
       proxy_set_header Host $host;
       proxy_set_header X-Real_IP $remote_addr;
       proxy_set_header X-Forwarded-for $remote_addr;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'Upgrade';
    }

html上的websocket连接需要换成:

var ws = new WebSocket('wss://blog.mrabit.com/wss');

重启nginx,完工

参考地址:

阅读全文

1.安装需要的模块

cnpm install -S express ws

2.创建server.js

var express = require('express');
var app = express();
var server = require('http').Server(app);
var websocket = require('ws');

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

var wss = new websocket.Server({
    server
});

//广播  
wss.broadcast = function broadcast(s, ws) {
    wss.clients.forEach(function each(client) {
        if (s == 1) {
            client.send(ws.name + ":" + ws.msg);
        }
        if (s == 0) {
            client.send(ws + "退出聊天室");
        }
    });
};
// 初始化连接
wss.on('connection', function(ws) {
    ws.send('你是第' + wss.clients.size + '位');
    // 接收消息并发送到客户端  
    ws.on('message', function(jsonStr, flags) {
        var obj = eval('(' + jsonStr + ')');
        this.user = obj;
        if (typeof this.user.msg != "undefined") {
            wss.broadcast(1, obj);
        }
    });
    // 退出聊天  
    ws.on('close', function(close) {
        try {
            //手动退出
            wss.broadcast(0, this.user.name);
        } catch (e) {
            console.log('连接断开');
        }
    });
});



server.listen(4000, function() {
    console.log('listening on *:4000');
});

3.新建index.html页面:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>聊天</title>
    <link rel="stylesheet" href="">
    <script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <script type="text/javascript">
    </script>
</head>
<style type="text/css" media="screen">

</style>

<body>
    <div style="width: 500px">
        <div id="show" style="height: 100px;width: 100%; overflow-x: auto; border: 1px solid #ccc;margin-bottom: 10px;">
        </div>
        <div style="float:left">
            <label>用户:</label>
            <label name="uname" style="display: inline; width: 200px;"></label>
            <label for="message" style="margin-left: 20px;">内容:</label>
            <input type="text" name="message" id="message">
        </div>
        <div style="float: right">
            <a href="javascript:void(0)" id="send">发送</a>
            <a href="javascript:void(0)" id="exit">退出</a>
        </div>
    </div>
</body>
<script type="text/javascript">
    var uname = "";
    while (!uname) {
        uname = prompt('请输入用户名');
    }
    $('[name="uname"]').text(uname);

    var ws = new WebSocket("ws://127.0.0.1:4000");
    ws.onopen = function() {
        console.log("连接状态", ws);
        $("#show").html("连接状态;" + !!ws.readyState + "</br>");
        console.log("open");
    };
    ws.onmessage = function(evt) {
        $("#show").append(evt.data + "</br>");
    };
    ws.onclose = function(evt) {
        console.log("WebSocketClosed!");
        console.log(evt);
    };
    ws.onerror = function(evt) {
        console.log("WebSocketError!");
    };

    $('#send').on('click', _ => {
        var msg = $("#message").val();
        var name = uname;
        var str = "{name:'" + name + "',msg:'" + msg + "'}";
        console.log("发送", str);
        ws.send(str);
    });

    $('#exit').on('click', _ => {
        var r = ws.close();
        console.log("退出", r);
    })
</script>

</html>

参考地址:

阅读全文

公司最近这个项目用的是spring boot,但是又需要前端使用Vue.js进行开发,单独使用requireJS和Vue.js配合又不方便,所以想到了直接使用webpack开发.

以下webpack介绍copy自:《入门Webpack,看这篇就够了》

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法:

  • 模块化,让我们可以把复杂的程序细化为小的文件;
  • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;
  • Scss,less等CSS预处理器
  • ...

这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。

以下贴出我的配置文件:

1. webpack.base.config.js: (PS:这只是基础配置,因为还需要一个webpack生产环境,所以把代理单独提到webpack开发环境配置中)
/**
 * webpack配置基础
 */
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const vendor = [&quot;iview&quot;, &quot;vuex&quot;, &quot;vue-router&quot;, &quot;echarts&quot;];
const config = {
    entry: {
        main: './app/main.js',
        vendor: vendor //CommonsChunkPlugin打包第三方
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname + '/public/dist/'),
        publicPath: '/public/dist/'
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js'
        }
    },
    externals: {
        'jquery': 'window.jQuery',
        'moment': 'window.moment',
    }, //较大的库引用cdn文件
    module: {
        rules: [{
                test: /.vue$/,
                loader: 'vue-loader',
                options: {
                    loader: {
                        css: ExtractTextPlugin.extract({
                            use: ['css-loader'],
                            fallback: 'style-loader'
                        })
                    }
                }
            },
            {
                test: /.js$/,
                exclude: /node_modules/, //编译打包时需要排除 node_modules 文件夹
                loader: &quot;babel-loader&quot;,
                query: { presets: ['es2015'] }
            },
            {
                test: /.scss$/,
                // loader: &quot;style-loader!css-loader&quot;
                use: ExtractTextPlugin.extract({
                    fallback: &quot;style-loader&quot;,
                    use: [&quot;css-loader&quot;, &quot;sass-loader&quot;]
                })
            },
            {
                test: /.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
            },
            {
                test: /.(gif|jpg|png|woff|woff2|ttf|svg|eot$)??.*$/,
                loader: &quot;url-loader?limit=10240&amp;name=./[name].[ext]?[hash]&quot;
            }
        ]
    },
    plugins: [
        new OpenBrowserPlugin({ url: 'http://localhost:3000' }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        }), //这个可以使jquery变成全局变量,不用在自己文件require('jquery')了
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor'],
            filename: 'common.js'
        }), //第三方库打包生成的文件
        new ExtractTextPlugin({
            filename: '[name].css',
            allChunks: true
        }), //分离 CSS 和 JS 文件.
    ]
};
module.exports = config;
2. webpack.config.js:
/**
 * webpack开发环境
 */
 
const merge = require(&quot;webpack-merge&quot;);
const WebpackBaseConfig = require(&quot;./webpack.base.config&quot;);
 
module.exports = merge(WebpackBaseConfig, {
    devServer: {
        port: 3000,
        proxy: {
            '*': {
                //后台地址
                target: 'http://localhost:8080',
                secure: false,
                prependPath: false,
                changeOrigin: true
            }
        },
        publicPath: '/public/dist/',
        historyApiFallback: true
    }
});
3. webpack.prod.config.js:
/**
 * webpack生产环境
 */
 
const webpack = require(&quot;webpack&quot;);
const ExtractTextPlugin = require(&quot;extract-text-webpack-plugin&quot;);
const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
const merge = require(&quot;webpack-merge&quot;);
const WebpackBaseConfig = require(&quot;./webpack.base.config&quot;);
WebpackBaseConfig.plugins = [];
WebpackBaseConfig.module.rules[1] = {
    test: /.js$/,
    //通常需要忽略node_modules,但iviews包含es6代码,压缩时需要转换成es5
    // exclude: /node_modules/, //编译打包时需要排除 node_modules 文件夹
    loader: &quot;babel-loader&quot;,
    query: { presets: ['es2015'] }
}
module.exports = merge(WebpackBaseConfig, {
    output: {
        filename: '[name].[hash].js',
        publicPath: '/public/dist/'
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        }), //这个可以使jquery变成全局变量,不用在自己文件require('jquery')了
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor'],
            filename: 'common.[hash].js'
        }), //第三方库打包生成的文件
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '&quot;production&quot;'
            }
        }),
        //在这个数组中new一个实例就可以了
        new webpack.BannerPlugin(&quot;Copyright mrabit.&quot;),
        //为组件分配 ID,通过这个插件 Webpack 可以分析和优先考虑使用最多的模块,并为它们分配最小的 ID.
        new webpack.optimize.OccurrenceOrderPlugin(), 
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_debugger: false,
                drop_console: false
            }
        }), //压缩JS代码.
        new ExtractTextPlugin({
            filename: '[name].[hash].css',
            allChunks: true
        }), //分离 CSS 和 JS 文件.
        new HtmlWebpackPlugin({
            filename: '../../index.html',
            template: './index.ejs',
            inject: false
        })
    ]
});
4. 通过上面的配置可实现webpack-dev-server3000端口去代理8080端口。在package.json中添加:
"scripts": {
    "dev": "rimraf public/dist/* && webpack-dev-server --host 0.0.0.0 --history-api-fallback --inline --hot",
    "build": "rimraf public/dist/* && webpack --progress --config webpack.prod.config.js"
},
5. 之后直接启动spring boot后台,然后npm run dev就可以通过访问3000端口来进行前端的开发了.
6. 当然,这里推荐使用微软的VSCode,虽然我平时用的都是WebStorm,但是相对于webpack开发,VSCode确实要流畅很多

阅读全文

我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。 研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息,并发送到到服务器端,由后端程序转换成图片格式后,以流的形式反射给浏览器端下载。

最近在项目中有需求将一个非HighChart的SVG地图转存为图片并下载的功能。 本希望模拟HighChart的原理实现,可是研究发现,该地图的SVG代码信息多达两万字节,然而HighChart后端制图程序却有着字节数限制,所以就不能这么处理了。

然后国外社区讨论的方法也多是前后端协同处理来完成这个功能的,这样实现会比较重, 而且部署不便。

经过一番搜寻,终于发现一个不依赖任何外部库,框架,同时仅仅通过浏览器端js便能实现的方法。 代码实现的具体来源地址已经忘记了, 这里保留代码原创作者的版权哈。

首先,我们约定SVG的上下文结构是如下的:

<div class="svg-wrap">
  <svg>...<svg>
<div>

然后,我们就可以通过如下代码来将svg图形转为图片并下载了:

var svgXml = $('.svg-wrap').html();

var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流

var canvas = document.createElement('canvas');  //准备空画布
canvas.width = $('.svg-wrap svg').width();
canvas.height = $('.svg-wrap svg').height();

var context = canvas.getContext('2d');  //取得画布的2d绘图上下文
context.drawImage(image, 0, 0);

var a = document.createElement('a');
a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
a.download = "MapByMathArtSys";  //设定下载名称
a.click(); //点击触发下载

阅读全文

Promise in js

回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切。

2015 年 6 月,ECMAScript 6 的正式版 终于发布了。

ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现。ES6 的目标,是使得 JavaScript 语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。

概念

ES6 原生提供了 Promise 对象。

所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。

Promise 对象有以下两个特点。

(1)对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。

(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。

Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

var promise = new Promise(function(resolve, reject) {
 if (/* 异步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(value) {
 // failure
});

Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 方法和 reject 方法。

如果异步操作成功,则用 resolve 方法将 Promise 对象的状态,从「未完成」变为「成功」(即从 pending 变为 resolved);

如果异步操作失败,则用 reject 方法将 Promise 对象的状态,从「未完成」变为「失败」(即从 pending 变为 rejected)。

基本的 api

  1. Promise.resolve()
  2. Promise.reject()
  3. Promise.prototype.then()
  4. Promise.prototype.catch()
  5. Promise.all() // 所有的完成

     var p = Promise.all([p1,p2,p3]);
  6. Promise.race() // 竞速,完成一个即可

进阶

promises 的奇妙在于给予我们以前的 return 与 throw,每个 Promise 都会提供一个 then() 函数,和一个 catch(),实际上是 then(null, ...) 函数,

    somePromise().then(functoin(){
        // do something
    });

我们可以做三件事,

1. return 另一个 promise
2. return 一个同步的值 (或者 undefined)
3. throw 一个同步异常 ` throw new Eror('');`

1. 封装同步与异步代码

```
new Promise(function (resolve, reject) {
 resolve(someValue);
 });
```
写成

```
Promise.resolve(someValue);
```

2. 捕获同步异常

 new Promise(function (resolve, reject) {
 throw new Error('悲剧了,又出 bug 了');
 }).catch(function(err){
 console.log(err);
 });

如果是同步代码,可以写成

    Promise.reject(new Error("什么鬼"));

3. 多个异常捕获,更加精准的捕获

somePromise.then(function() {
 return a.b.c.d();
}).catch(TypeError, function(e) {
 //If a is defined, will end up here because
 //it is a type error to reference property of undefined
}).catch(ReferenceError, function(e) {
 //Will end up here if a wasn't defined at all
}).catch(function(e) {
 //Generic catch-the rest, error wasn't TypeError nor
 //ReferenceError
});

4. 获取两个 Promise 的返回值

1. .then 方式顺序调用
2. 设定更高层的作用域
3. spread

5. finally

任何情况下都会执行的,一般写在 catch 之后

6. bind

somethingAsync().bind({})
.spread(function (aValue, bValue) {
 this.aValue = aValue;
 this.bValue = bValue;
 return somethingElseAsync(aValue, bValue);
})
.then(function (cValue) {
     return this.aValue + this.bValue + cValue;
});

或者 你也可以这样

var scope = {};
somethingAsync()
.spread(function (aValue, bValue) {
 scope.aValue = aValue;
 scope.bValue = bValue;
 return somethingElseAsync(aValue, bValue);
})
.then(function (cValue) {
 return scope.aValue + scope.bValue + cValue;
});

然而,这有非常多的区别,

  1. 你必须先声明,有浪费资源和内存泄露的风险
  2. 不能用于放在一个表达式的上下文中
  3. 效率更低

7. all。非常用于于处理一个动态大小均匀的 Promise 列表

8. join。非常适用于处理多个分离的 Promise

```
var join = Promise.join;
join(getPictures(), getComments(), getTweets(),
 function(pictures, comments, tweets) {
 console.log("in total: " + pictures.length + comments.length + tweets.length);
});
```

9. props。处理一个 promise 的 map 集合。只有有一个失败,所有的执行都结束

```
Promise.props({
 pictures: getPictures(),
 comments: getComments(),
 tweets: getTweets()
}).then(function(result) {
 console.log(result.tweets, result.pictures, result.comments);
});
```

10. any 、some、race

```
Promise.some([
 ping("ns1.example.com"),
 ping("ns2.example.com"),
 ping("ns3.example.com"),
 ping("ns4.example.com")
], 2).spread(function(first, second) {
 console.log(first, second);
}).catch(AggregateError, function(err) {

err.forEach(function(e) {
console.error(e.stack);
});
});;

```
有可能,失败的 promise 比较多,导致,Promsie 永远不会 fulfilled

11. .map(Function mapper [, Object options])

用于处理一个数组,或者 promise 数组,

Option: concurrency 并发现

    map(..., {concurrency: 1});

以下为不限制并发数量,读书文件信息

var Promise = require("bluebird");
var join = Promise.join;
var fs = Promise.promisifyAll(require("fs"));
var concurrency = parseFloat(process.argv[2] || "Infinity");

var fileNames = ["file1.json", "file2.json"];
Promise.map(fileNames, function(fileName) {
 return fs.readFileAsync(fileName)
 .then(JSON.parse)
 .catch(SyntaxError, function(e) {
 e.fileName = fileName;
 throw e;
 })
}, {concurrency: concurrency}).then(function(parsedJSONs) {
 console.log(parsedJSONs);
}).catch(SyntaxError, function(e) {
 console.log("Invalid JSON in file " + e.fileName + ": " + e.message);
});

结果

$ sync && echo 3 > /proc/sys/vm/drop_caches
$ node test.js 1
reading files 35ms
$ sync && echo 3 > /proc/sys/vm/drop_caches
$ node test.js Infinity
reading files: 9ms

11. .reduce(Function reducer [, dynamic initialValue]) -> Promise

Promise.reduce(["file1.txt", "file2.txt", "file3.txt"], function(total, fileName) {
 return fs.readFileAsync(fileName, "utf8").then(function(contents) {
 return total + parseInt(contents, 10);
 });
}, 0).then(function(total) {
 //Total is 30
});

12. Time

  1. .delay(int ms) -> Promise
  2. .timeout(int ms [, String message]) -> Promise

Promise 的实现

  1. q
  2. bluebird
  3. co
  4. when

ASYNC

async 函数与 Promise、Generator 函数一样,是用来取代回调函数、解决异步操作的一种方法。它本质上是 Generator 函数的语法糖。async 函数并不属于 ES6,而是被列入了 ES7。

参考文献(说是抄也可以的):

阮一峰的ES6 教程
关于promises,你理解了多少?
Bluebird 的官方文档

阅读全文