1. 把错误打印出来 WebSocket断开的原因有很多，最好在WebSocket断开时，将错误打印出来。 在线demo地址：https://wdd.js.org/websocket-demos/ ws.onerror = function (e) { console.log('WebSocket发生错误: ' + e.code) console.log(e) } 如果你想自己玩玩WebSocket, 但是你又不想自己部署一个WebSocket服务器，你可以使用ws = new WebSocket('wss://echo.websocket.org/'), 你向echo.websocket.org发送消息，它会回复你同样的消息。 2. 重要信息错误状态码 WebSocket断开时，会触发CloseEvent, CloseEvent会在连接关闭时发送给使用 WebSockets 的客户端. 它在 WebSocket 对象的 onclose 事件监听器中使用。CloseEvent的code字段表示了WebSocket断开的原因。可以从该字段中分析断开的原因。 3. 关闭状态码表 一般来说1006的错误码出现的情况比较常见，该错误码一般出现在断网时。 状态码 名称 描述 0–999 保留段, 未使用. 1000 CLOSE_NORMAL 正常关闭; 无论为何目的而创建, 该链接都已成功完成任务. 1001 CLOSE_GOING_AWAY 终端离开, 可能因为服务端错误, 也可能因为浏览器正从打开连接的页面跳转离开. 1002 CLOSE_PROTOCOL_ERROR 由于协议错误而中断连接. 1003 CLOSE_UNSUPPORTED 由于接收到不允许的数据类型而断开连接 (如仅接收文本数据的终端接收到了二进制数据). 1004 保留. 其意义可能会在未来定义. 1005 CLOSE_NO_STATUS 保留. 表示没有收到预期的状态码. 1006 CLOSE_ABNORMAL 保留. 用于期望收到状态码时连接非正常关闭 (也就是说, 没有发送关闭帧)....

无论什么语言，都需要逻辑，而逻辑中，能否判断出真假，是最基本也是最重要技能之一。 JS中的假值有6个 false '' undefinded null 0, +0, -0 NaN 有点类似假值的真值有两个 {} [] 空对象和空数组，很多初学者都很用把这两个当做假值。但是实际上他们是真值，你只需要记住，除了null之外的所有对象类型的数据，都是真值。 typeof null // 'object' 据说：typeof null返回对象这是一个js语言中的bug。实际上typeof null应该返回null才比较准确，但是这个bug已经存来好久了。几乎所有的代码里都这样去判断。如果把typeof null给改成返回null, 那么这必定会导致JS世界末日。 我们承认JS并不完美，她有很多小缺点，但是这并不妨碍她吸引万千开发者拜倒在她的石榴裙下。 就像一首歌唱的：有些人说不清哪里好 但就是谁都替代不了

1. AWS EC2 不支持WebSocket 直达解决方案 英文版 简单说一下思路：WebSocket底层基于TCP协议的，如果你的服务器基于HTTP协议暴露80端口，那WebSocket肯定无法连接。你只要将HTTP协议修改成TCP协议就可以了。 然后是安全组的配置： 同样如果使用了NGINX作为反向代理，那么NGINX也需要做配置的。 // https://gist.githubusercontent.com/unshift/324be6a8dc9e880d4d670de0dc97a8ce/raw/29507ed6b3c9394ecd7842f9d3228827cffd1c58/elasticbeanstalk_websockets files: "/etc/nginx/conf.d/01_websockets.conf" : mode: "000644" owner: root group: root content : | upstream nodejs { server 127.0.0.1:8081; keepalive 256; } server { listen 8080; location / { proxy_pass http://nodejs; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } "/opt/elasticbeanstalk/hooks/appdeploy/enact/41_remove_eb_nginx_confg.sh": mode: "000755" owner: root group: root content : | mv /etc/nginx/conf....

1. 问题现象 HTTP 状态码为 200 OK 时， jquery ajax报错 2. 问题原因 jquery ajax的dataType字段包含：json, 但是服务端返回的数据不是规范的json格式，导致jquery解析json字符串报错，最终导致ajax报错。 jQuery ajax 官方文档上说明： “json”: Evaluates the response as JSON and returns a JavaScript object. Cross-domain “json” requests are converted to “jsonp” unless the request includes jsonp: false in its request options. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead....

1. 兼容情况 如果想浏览器支持粘贴功能，那么浏览器必须支持，document.execCommand(‘copy’)方法，也可以根据document.queryCommandEnabled(‘copy’)，返回的true或者false判断浏览器是否支持copy命令。 从下表可以看出，主流的浏览器都支持execCommand命令 2. 复制的原理 查询元素 选中元素 执行复制命令 3. 代码展示 // html <input id="username" value="123456"> // 查询元素 var username = document.getElementById(‘username’) // 选中元素 username.select() // 执行复制 document.execCommand('copy') 注意: 以上代码只是简单示意，在实践过程中还有几个要判断的情况 首要要去检测浏览器execCommand能力检测 选取元素时，有可能选取元素为空，要考虑这种情况的处理 4. 第三方方案 clipboard.js是一个比较方便的剪贴板库，功能蛮多的。 <!-- Target --> <textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button> 官方给的代码里有上面的一个示例，如果你用了这个示例，但是不起作用，那你估计是没有初始化ClipboardJS示例的。 注意：下面的函数必须要主动调用，这样才能给响应的DOM元素注册事件。 ClipboardJS源代码压缩后大约有3kb，虽然很小了，但是如果你不需要它的这么多功能的话，其实你自己写几行代码就可以搞定复制功能。 new ClipboardJS('.btn');

1. 问题表现 以file:///xxx.html打开某个html文件，发送ajax请求时报错： Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access. 2. 问题原因 Origin null是本地文件系统，因此这表明您正在加载通过file：// URL进行加载调用的HTML页面（例如，只需在本地文件浏览器或类似文件中双击它）。不同的浏览器采用不同的方法将相同来源策略应用到本地文件。Chrome要求比较严格，不允许这种形势的跨域请求。而最好使用http:// 访问html. 3. 解决方案 以下给出三个解决方案，第一个最快，第三个作为彻底。 3.1. 方案1 给Chrome快捷方式中增加 –allow-file-access-from-files 打开Chrome快捷方式的属性中设置：右击Chrome浏览器快捷方式，选择“属性”，在“目标”中加"–allow-file-access-from-files"，注意前面有个空格，重启Chrome浏览器便可。 3.2. 方案2 启动一个简单的静态文件服务器, 以http协议访问html 参见我的这篇文章: 一行命令搭建简易静态文件http服务器 3.3. 方案3 服务端响应修改Access-Control-Allow-Origin : * response.addHeader("Access-Control-Allow-Origin","*") 4. 参考文章 如何解决XMLHttpRequest cannot load file~~~~~~~Origin ’null’ is therefore not allowed access 让chrome支持本地Ajax请求,Ajax请求status cancel Origin null is not allowed by Access-Control-Allow-Origin Origin null is not allowed by Access-Control-Allow-Origin

1. 功能最强：regex101 优点： 支持多种语言, prec,php,javascript,python,golang 界面美观大方 支持错误提示，实时匹配 缺点： 有时候加载速度太慢 2. 可视化正则绘图: Regulex 优点： 实时根据正则表达式绘图 页面加载速度快 3. 可视化正则绘图：regexper 优点： 根据正则表达式绘图 页面加载速度快 缺点： 无法实时绘图，需要点击才可以 4. 专注于python正则：pyregex 专注python 页面加载速度快

1. 问答题 1.1. HTML相关 1.1.1. 的作用是什么？ 1.1.2. script, script async和script defer之间有什么区别？ 1.1.3. cookie, sessionStorage 和 localStorage之间有什么区别？ 1.1.4. 用过哪些html模板渲染工具？ 1.2. CSS相关 1.2.1. 简述CSS盒子模型 1.2.2. CSS有哪些选择器？ 1.2.3. CSS sprite是什么？ 1.2.4. 写一下你知道的前端UI框架？ 1.3. JS相关 1.3.1. js有哪些数据类型？ 1.3.2. js有哪些假值？ 1.3.3. js数字和字符串之间有什么快速转换的写法？ 1.3.4. 经常使用哪些ES6的语法？ 1.3.5. 什么是同源策略？ 1.3.6. 跨域有哪些解决方法？ 1.3.7. 网页进度条实现的原理 1.3.8. 请问console.log是同步的，还是异步的？ 1.3.9. 下面console输出的值是什么？ var scores = [10,11,12]; var total = 0; for(var score in scores){ total += score; } var average = total/scores.length; console.log(average); 1....

床底下秘密 我是一个毅力不是很够的人。我曾经下定决心要锻炼身体，买了一些健身器材，例如瑜伽垫，仰卧起坐的器材，俯卧撑的器材。然而三分钟的热度过后，我把瑜伽垫卷了起来，塞到床底下。把仰卧起坐的器材拆开，也塞到了床底下。 所以每次我都不敢看床底下，那里塞满了我的羞愧。我常常想，我这不就是永远睡在羞愧之上吗？ 那么，是什么让我放弃了自己的目标，慢慢活成了自己讨厌的样子呢？ 之前和朋友聊天，我们有一段时间没见了。我突然觉得他也太能聊了，说了很多我不知道的新鲜事，还有一些可以让人茅塞顿开的想法。完了之后，他劝我让我多读书。我觉得这个想法很多。我是确实需要读书了。毕竟我的床底下已经没有空间再塞其他的东西了。 于是我在多看阅读上买了一下电子书，在京东上买了一些实体书，然后又买了一个kindle。在读书的过程中，有时候作者也会推荐你看一些其他的书。我给自己定了2018年我的阅读计划，给自己定下要看哪些书。 看书的方法 当我决定要看书，并且为此付出了不少的金钱的情况下。我是非常不愿因让我的金钱的付出白白打水漂的，毕竟买书以及买设备，这不是免费的服务。于是我给自己指定了一个非常完善的定量阅读标准 读书方法v1.0.0 版 如下 每天至少看三本书 每本书看50页 人要有标准才能判断是否达标，没有标准，没有数字化的支撑，那是很难以持续的。比如说中国的菜谱，做某道菜中写了一句：加入少许盐。中国人看了会想，那我就按照口味随便加点盐吧。外国人就会被搞得非常迷糊，少许是多少克盐？ 20g, 30g? 完全没有标准嘛。 按照读书方法 v1.0.0版，我看了几天，这个效果是很好的。但是我很累，电子书50页可不是个小数目。有时候很难完成的。于是我必须要升级我的读书方法。 读书方法v1.0.1 版 如下 每天至少看三本书 每本书看10页 按照读书方法v1.0.1 版，我看了几天，虽然读书的进度很慢，但是我很容易有满足感，因为这个目标是很容易就达成的。因为你随便去上个厕所，看个10页电子书也是绰绰有余的。但是这个版本也有个问题。 如果我今天看的这本书看的流连忘返，一不小心忘记看页码了，居然不知不觉读了38页，那么是不是已经消耗了未来几天的阅读量呢，明天这本书要不要度呢？ 所以，我要升级我的读书方法。 读书方法v1.0.2版： 每天至少读三本书 每本书至少读10页 我按照这个方法，感觉做的不错。每天都有一定的阅读量要看，而且阅读量不是很大，不会让我觉得很累。而且当我完成了这个目标，我是会获得不小的满足感。 大目标分解成小目标去逐个击破，这是我这篇文章的核心观点。 冲量公式 I = F x T 冲量是力的时间累积效应的量度，是矢量。如果物体所受的力是大小和方向都不变的恒力F，冲量I就是F和作用时间t的乘积。 冲量是描述力对物体作用的时间累积效应的物理量。力的冲量是一个过程量。在谈及冲量时，必须明确是哪个力在哪段时间上的冲量。 个人好习惯的养成，不是一蹴而就的，而是类似于物理学冲量的概念：力在一段时间内的累积，是过程量 三分钟的热度对应的冲量：I = F_max x T_min。使用很大的力，作用时间超短，基本上没啥效果，冲量趋近于零。 微习惯对应的冲量：I = F_min x T_max。使用很小的力，做长时间的积累。冲量不会趋近于零，而是会慢慢增长，然后趋近于一个稳定水平。比如你给自己规定每天看1页书，但是大多数情况下，如果你做了看书的动作，基本上你看书的页数一定会大于1页。 看什么样的书 我自己喜欢看计算机，心理学，历史人文方面的出版书籍。而我的选择标准有两个，符合任一一个，我都会去看。 要有用。无论是对我的专业知识，还是对人际交往，金融理财等方面要用有益之处 要有趣。没趣的书我是断然不会去看的。 读书实际上是读人，一流作家写的一流的书，三流作家只能写出九流的书。

0 阅前须知 本文并不是教程，只是实现方案 我只是从WEB端考虑这个问题，实际还需要后端sip服务器的配合 jsSIP有个非常不错的在线demo, 可以去哪里玩耍，很好玩呢 try jssip 1. 技术简介 WebRTC: WebRTC，名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准 SIP: 会话发起协议（Session Initiation Protocol，缩写SIP）是一个由IETF MMUSIC工作组开发的协议，作为标准被提议用于创建，修改和终止包括视频，语音，即时通信，在线游戏和虚拟现实等多种多媒体元素在内的交互式用户会话。2000年11月，SIP被正式批准成为3GPP信号协议之一，并成为IMS体系结构的一个永久单元。SIP与H.323一样，是用于VoIP最主要的信令协议之一。 一般来说，要么使用实体话机，要么在系统上安装基于sip的客户端程序。实体话机硬件成本高，基于sip的客户端往往兼容性差，无法跨平台，易被杀毒软件查杀。 而WebRTC或许是更好的解决方案，只要一个浏览器就可以实时语音视频通话，这是很不错的解决方案。WebSocket可以用来传递sip信令，而WebRTC用来实时传输语音视频流。 2. 前端WebRTC实现方案 其实我们不需要去自己处理WebRTC的相关方法，或者去处理视频或者媒体流。市面上已经有不错的模块可供选择。 2.1 jsSIP jsSIP是JavaScript SIP 库 功能特点如下： 可以在浏览器或者Nodejs中运行 使用WebSocket传递SIP协议 视频音频实时消息使用WebRTC 非常轻量 100%纯JavaScript 使用简单并且具有强大的Api 服务端支持 OverSIP, Kamailio, Asterisk, OfficeSIP，reSIProcate，Frafos ABC SBC，TekSIP 是RFC 7118 and OverSIP的作者写的 下面是使用JsSIP打电话的例子，非常简单吧 // Create our JsSIP instance and run it: var socket = new JsSIP.WebSocketInterface('wss://sip.myhost.com'); var configuration = { sockets : [ socket ], uri : 'sip:alice@example....