HTML5的Websocket(理论篇 I)

** 先请来TA的邻居:**

http:无状态、基于tcp恳请/响应形式的应用层共谋
(A:哎哎,上次你请本身吃饭了么? B:笔者合计,
上次请您吃了么) tcp:面向连接、保险高可信性(数据无遗失、数据无失序、数据无不当、数据无重复到达卡塔尔国 传输层共谋。(看呀,大阅兵,如此规整有秩序)

此地是记录一些本人在上学进度中认为关键的知识点,记录下来以供日后翻看,如有不对应接指正,望在前面三个的旅途共勉!

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>wangEditor上传图片到服务器</title>
  7 </head>
  8 
  9 <body>
 10 
 11     <div id="editor"></div>
 12 
 13     <!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
 14     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 15     <script type="text/javascript" src="script/wangEditor-3.1.1.js"></script>
 16     <script type="text/javascript">
 17     // 声明富文本编辑器
 18     var E = window.wangEditor;
 19 
 20     // 初始化富文本编辑器
 21     var editor = new E('#editor');
 22 
 23     // 上传图片到服务器
 24     editor.customConfig.uploadImgServer = '/upload'; // 其中/upload是上传图片的服务器端接口
 25 
 26     // 将图片大小限制为 3M
 27     editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
 28 
 29     // 默认为 10000 张(即不限制),需要限制可自己配置
 30     // 限制一次最多上传 5 张图片
 31     editor.customConfig.uploadImgMaxLength = 5;
 32 
 33     // 上传图片时可自定义传递一些参数,例如传递验证的token等。参数会被添加到formdata中
 34     editor.customConfig.uploadImgParams = {
 35         // 如果版本 <=v3.1.0 ,属性值会自动进行 encode ,此处无需 encode
 36         // 如果版本 >=v3.1.1 ,属性值不会自动 encode ,如有需要自己手动 encode
 37         token: 'abcdef12345'
 38     }
 39 
 40     // 如果还需要将参数拼接到 url 中,可再加上如下配置
 41     editor.customConfig.uploadImgParamsWithUrl = true;
 42 
 43     // 上传图片时,可自定义filename,即在使用formdata.append(name, file)添加图片文件时,自定义第一个参数。
 44     editor.customConfig.uploadFileName = 'yourFileName';
 45 
 46     // 上传图片时刻自定义设置 header
 47     editor.customConfig.uploadImgHeaders = {
 48         'Accept': 'text/x-json'
 49     }
 50 
 51     // 跨域上传中如果需要传递 cookie 需设置 withCredentials
 52     editor.customConfig.withCredentials = true;
 53 
 54     // 默认的 timeout 时间是 10 秒钟
 55     // 将 timeout 时间改为 3s
 56     editor.customConfig.uploadImgTimeout = 3000;
 57 
 58     // 上传图片的错误提示默认使用alert弹出,你也可以自定义用户体验更好的提示方式
 59     editor.customConfig.customAlert = function(info) {
 60         // info 是需要提示的内容
 61         alert('自定义提示:' + info);
 62     }
 63 
 64     // 可使用监听函数在上传图片的不同阶段做相应处理
 65     editor.customConfig.uploadImgHooks = {
 66         before: function(xhr, editor, files) {
 67             // 图片上传之前触发
 68             // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
 69 
 70             // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
 71             // return {
 72             //     prevent: true,
 73             //     msg: '放弃上传'
 74             // }
 75         },
 76         success: function(xhr, editor, result) {
 77             // 图片上传并返回结果,图片插入成功之后触发
 78             // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
 79         },
 80         fail: function(xhr, editor, result) {
 81             // 图片上传并返回结果,但图片插入错误时触发
 82             // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
 83         },
 84         error: function(xhr, editor) {
 85             // 图片上传出错时触发
 86             // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
 87         },
 88         timeout: function(xhr, editor) {
 89             // 图片上传超时时触发
 90             // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
 91         },
 92 
 93         // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
 94         // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
 95         customInsert: function(insertImg, result, editor) {
 96             // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
 97             // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
 98 
 99             // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
100             var url = result.url
101             insertImg(url)
102 
103             // result 必须是一个 JSON 格式字符串!!!否则报错
104         }
105     }
106 
107     // 如果想完全自己控制图片上传的过程,可以使用如下代码
108     editor.customConfig.customUploadImg = function(files, insert) {
109         // files 是 input 中选中的文件列表
110         // insert 是获取图片 url 后,插入到编辑器的方法
111 
112         // 上传代码返回结果之后,将图片插入到编辑器中
113         insert(imgUrl)
114     }
115 
116     // 创建编辑器1
117     editor.create();
118     </script>
119 </body>
120 
121 </html>

.md#%E4%B8%BA%E4%BB%十分之九E4%B9%88%E8%A6%81%E5%BC%95%E5%85%A5websocket卡塔尔为何要引进Websocket:

ENCOREFC开篇介绍:本协议的目标是为领悟决基于浏览器的前后相继须要拉取能源时必得发起三个HTTP乞求和长日子的轮询的难题。

long poll(长轮询卡塔尔:
顾客端发送二个request后,服务器得到这么些三番五次,倘诺有新闻,才回去response给顾客端。未有音讯,就径直不回去response。之后顾客端再度发送request,
重复上次的动作。

图片 1

从上能够看来,http左券的风味是服务器不可能主动交流客户端,只可以由顾客端发起。它的被动性预示了在做到双向通讯时需求不停的接连或三番三遍一向张开,那就须求服务器急速的管理速度或高并发的技术,是那么些消耗财富的。

本条时候,Websocket现身了。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <!-- 在页面添加三个按钮 -->
 9     <input type="button" value="1">
10     <input type="button" value="2">
11     <input type="button" value="3">
12 
13 
14     <script>
15         // 获取页面所有的input
16         var aBtn = document.getElementsByTagName('input');
17 
18         // 循环绑定点击事件,当然毫无疑问这里点击之后会弹出3,
19         //因为我们知道js是单线程的,当基本逻辑语句执行完之后,才会执行点击事件
20         //而当你触发点击事件的时候,for循环都已经跑完了,所以i已经变成了3;
21         for(var i = 0; i < aBtn.length; i++){
22             aBtn[i].onclick = function(){ 
23                 alert(i);
24             }
25         }
26 
27         // 解决方法1:也是最简单的方法,就是将for循环的var变成let
28         //这样当点击每个按钮的时候,就会依次弹出0,1,2;
29         //let是ES6新增的一个变量声明方式,拥有块级作用域;
30         for(let i = 0; i < aBtn.length; i++){
31             aBtn[i].onclick = function(){ 
32                 alert(i);
33             }
34         }
35 
36         //解决方法2:利用闭包(说是闭包,貌似也不完全是),也就是函数作用域访问原则的特性
37         //函数内部可以访问外部的变量,外部却访问不了里边的;
38         for(var i = 0; i < aBtn.length; i++){
39             (function(i){
40                 aBtn[i].onclick = function(){ 
41                     alert(i);
42                 }
43             })(i);
44         }
45     </script>
46 </body>
47 </html>

 

.md#websocket%E6%98%AF%E4%BB%80%E4%B9%88)Websocket是什么:

福睿斯FC中写到:WebSocket公约使在支配景况下运作不受信赖代码的客商端和能够筛选与那几个代码通信的长途主机之间可以双向通讯。

对,划重点:双向通信

Websocket在连接之后,顾客端能够主动发送音讯给服务器,服务器也能够继续努力向顾客端推送音信。比如:预定车票音讯,除了大家发央浼询问车票怎么样,当然更愿意若是有新新闻,能够直接布告我们。

其特点:

(1)握手阶段采纳 HTTP 公约,私下认可端口是80和443

(2)建构在TCP左券底子之上,和http公约同归于应用层

(4)能够发送文书,也能够发送二进制数据

(5)未有同源节制,顾客端能够与自由服务器通讯

(6)公约标记符是ws(假使加密,为wss),如ws://localhost:8023

简易的话,Websocket公约分成两局部:握手和数据传输。

图片 2

自然,这里也不光局限于点击事件,也得以换到setTimeout等也可以有同等的难题,能够用这两种格局来缓和;

发表评论

电子邮件地址不会被公开。 必填项已用*标注