-
前言
- 0. 前端工具
- 1. html
- 2. CSS
-
3. JavaScript 基础
-
3.1 JS简介
-
3.2 变量
-
3.3 变量的强制类型转换
-
3.4 运算符
-
3.5 流程控制语句:选择结构(if和switch)
-
3.6 流程控制语句:循环结构(for和while)
-
3.7 对象简介和对象的基本操作
-
3.8 基本数据类型vs引用数据类型
-
3.9 函数
-
3.10 作用域
-
3.11 this
-
3.12 对象的创建&构造函数
-
3.13 原型对象
-
3.14 数组简介
-
3.15 数组的四个基本方法&数组的遍历
-
3.16 数组的常见方法
-
3.17 数组的其他方法
-
3.18 内置对象:Date
-
3.19 内置对象(其他)
-
3.20 DOM操作
-
3.21 事件对象Event和冒泡
-
3.22 事件委托
-
3.23 BOM的常见内置方法和内置对象
-
3.24 原型链
-
3.25 常见代码解读
-
3.1 JS简介
- 4. JavaScript进阶
- 5. 前端基本功:CSS、DOM练习和 Javascript 特效
- 6. jQuery
- 7. HTML5和CSS3
- 8. 移动web开发
- 9. Ajax
- 10. Node.js和模块化
- 11. ES6
- 12. Vue基础
- 13. React基础
-
14. 前端面试
-
14.1 准备
-
14.2 页面布局
-
14.3 CSS盒模型及BFC
-
14.4 DOM事件的总结
-
14.5 HTTP协议
-
14.6 创建对象和原型链
-
14.7 面向对象:类的定义和继承的几种方式
-
14.8 跨域通信类
-
14.9 安全问题:CSRF和XSS
-
14.10 算法问题
-
14.11 浏览器渲染机制
-
14.12 js运行机制:异步和单线程
-
14.13 页面性能优化
-
14.14 前端错误监控
-
14.15 JavaScript高级面试:前言
-
14.16 模块化的使用和编译环境
-
14.17 ES6
-
14.18 虚拟DOM
-
14.19 MVVM
-
14.20 面试题整理
-
14.21 网友面经
-
14.22 面试技巧
-
14.23 推荐文章
-
14.24 计算机网络
-
14.25 web安全
-
14.26 其他
-
14.1 准备
- 15. 面试题积累
- 16. 前端进阶
- 17. 前端综合
- 18. 推荐链接
WebSocket 的引入
背景分析
HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接。
当用户在浏览器上进行操作时,可以请求服务器上的api;但是反过来却不可能:服务器端发生了一个事件,无法将这个事件的信息实时主动地通知客户端。只有在客户端查询服务器当前状态时,所发生事件的信息才会从服务器传递到客户端。
那怎么去实时地知道服务器的状态呢?方法有两个:
(1)轮询:客户端每隔很短的时间,都会对服务器发出请求,查看是否有新的消息,只要轮询速度足够快,例如1秒,就能给人造成交互是实时进行的印象。这种做法是无奈之举,实际上对服务器、客户端双方都造成了大量的性能浪费。
(2)长连接:客户端只请求一次,但是服务器会将连接保持,不会返回结果。当服务器有了新数据时,实时地发给客户端,而一直保持挂起状态。这种做法的也造成了大量的性能浪费。
WebSocket 协议
最新的 HTML5协议,制定了 WebSocket 协议标准,允许客户端和服务器端以全双工的方式进行通信。
WebSocket 的原理非常简单:利用HTTP请求产生握手,HTTP头部含有 WebSocket 协议的请求,*握手之后,二者转用TCP协议进行交流(QQ的协议)。
WebSocket协议需要浏览器和服务器都支持才可以使用:
支持WebSocket协议的浏览器有:Chrome 4、火狐4、IE10、Safari5
支持WebSocket协议的服务器有:Node 0、Apach7.0.2、Nginx1.3
http 长连接和 websocket 的长连接区别
HTTP1.1通过使用Connection:keep-alive进行长连接,HTTP 1.1默认进行持久连接。在一次 TCP 连接中可以完成多个 HTTP 请求,但是对每个请求仍然要单独发 header,Keep-Alive不会永久保持连接,它有一个保持时间,可以在不同的服务器软件(如Apache)中设定这个时间。
websocket是一个真正的全双工。长连接第一次tcp链路建立之后,后续数据可以双方都进行发送,不需要发送请求头。
keep-alive双方并没有建立正真的连接会话,服务端可以在任何一次请求完成后关闭。WebSocket 它本身就规定了是正真的、双工的长连接,两边都必须要维持住连接的状态。
Socket.IO 的引入
Node.js上需要写一些程序,来处理TCP请求。
Node.js从诞生之日起,就支持 WebSocket 协议。不过,从底层一步一步搭建一个Socket服务器很费劲(想象一下Node写一个静态文件服务都那么费劲)。所以,有大神帮我们写了一个库 Socket.IO。
Socket.IO 是业界良心,新手福音。它屏蔽了所有底层细节,让顶层调用非常简单。并且还为不支持 WebSocket 协议的浏览器,提供了长轮询的透明模拟机制。
Node的单线程、非阻塞I/O、事件驱动机制,使它非常适合Socket服务器。
Socket.IO 的安装
Socket.IO 的官网是:http://socket.io/
安装方式:
npm install socket.io
copy