前端知识点——Web Sockets

本系列文章是我在实习面试之前的对自己掌握的知识点的总结，就从一直不太熟悉的webSockets开始吧～

WebSockets的第一印象：
可以创建和服务器进行双向会话的高级技术，取代了曾经使用的轮询方法。

API

WebSocket：用于连接WebSocket服务器的对象
CloseEvent：关闭连接时WebSocket对象触发的事件
MessageEvent：从服务器获取到消息的时候，WebSocket触发的事件

WebSocket对象

WebSocket对象用于创建和管理WebSockets连接，并通过这个连接发送和接受

参数：

url：要连接的url,ws或wss
protocols：协议名字字符串或数组，子协议，默认为空

异常：

SECURITY_ERR：表示试图连接的端口被屏蔽

方法：

WebSocket.close([code,[reason]])
- 关闭WebSocket连接或停止正在进行的连接请求
- 参数
  - code：关闭连接的状态号，默认为1000
  - reason：字符串，连接被关闭的原因
- 异常
  - INVALID_ACCESS_ERR：无效的code
  - SYNTAX_ERR：reason太长
WebSocket.send(data)
- 通过连接向服务器发送数据
- 参数
  - data：发送的数据
- 异常
  - INVALID_STATE_ERR：当前的连接状态不是open
  - SYNTAX_ERR：数据不合法

属性：

属性名	类型	描述
binaryType	string	传输的二进制内容类型，blob/arrayBuffer
bufferedAmount	long	调用send方法后，队列中等等待数据的大小，发送后为0
extensions	string	服务器选定的扩展
onclose	EventListener	监听close
onerror	EventListener	监听error
onmessage	EventListener	监听message，消息到达触发
onopen	EventListener	监听连接打开事件，readyState为open时触发
protpcol	string	服务器选定的子协议的字符串
readyState	short	连接的当前状态
url	string	传入构造器的url

readyState常量：

常量	值	描述
CONNECTING	0	连接尚未开启
OPEN	1	连接已经开启，准备通信
CLOSING	2	连接正在关闭
CLOSED	3	连接已经关闭或者无法建立

例子

url来自http://www.blue-zero.com/WebSocket/

// Create WebSocket connection.
const socket = new WebSocket('ws://121.40.165.18:8800');// Connection opened
socket.addEventListener('open', function (event) {socket.send('Hello Server!');
});// Listen for messages
socket.addEventListener('message', function (event) {console.log('Message from server ', event.data);
});// Listen for closed
socket.addEventListener('close', function (event) {console.log('Message from server ', event.data);
});

同时WebSocket需要服务器端支持，比如Node.js端可以使用以下常用的库：

Socket.IO
WebSocket-Node
ws

Socket.IO例

客户端

let socket = io('http://localhost');
socket.on('news', function (data) {console.log(data);socket.emit('clientMsg', { my: 'data' });
});

服务端

首先要安装socket.io模块

npm install socket.io --save

或者在本目录下执行 npm install

在 serve.js 中粘贴如下代码

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');app.listen(80);function handler (req, res) {fs.readFile(__dirname + '/index.html',function (err, data) {if (err) {res.writeHead(500);return res.end('Error loading index.html');}res.writeHead(200);res.end(data);});
}io.on('connection', function (socket) {socket.emit('news', { hello: 'world' });socket.on('clientMsg', function (data) {console.log(data);});
});

执行 node serve.js并访问http://localhost:80

关于socket.io的其他API，文档以后再补充

前端知识点——Web Sockets相关推荐

web前端知识点太多_前端知识点总结——框架中报错集锦（含解决方法）
前端知识点总结--框架中报错集锦(含解决方法) 1.vue 1.指定template直接返回多个标签 Component template should contain exactly one roo ...
初学者web前端知识点--HTML部分
初学者web前端知识点--HTML部分 html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. body:页面的主体标签,页面展现的内容就放置在这里面. title:页面的标题. ...
前端知识点总结—-响应式
前端知识点总结--响应式 1.Responsive Web Page:响应式网页/自适应的网页2010年提出, 一个网页,会自动根据用户浏览设备不同,自动必变布局,可以被PC/PAD/PHONE 正常 ...
前端知识点回顾——HTML，CSS篇
前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标 ...
前端知识点总结——H5
前端知识点总结--H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖动API (8)Web Wor ...
前端知识点HTML+基础JS总结
前端知识点要概 1.基本类型和引用类型基本类型:Number, String, Null, Undefined, Boolean, Symbol(ES6数据类型) 引用类型:Object.Array ...
Web前端 VS Web后端
想从事软件业的毕业生们大多要从基础的程序员做起.相较于其他的职位,Web软件开发工程师是一个技术要求较高.前景较好的工作.Web软件开发工程师可以分为Web前端和后端开发.那什么是Web前端,什么是W ...
HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是coo ...
bom event周期_前端知识点总结——BOM
前端知识点总结--BOM 1.BOM: Browser Object Model 什么是: 专门操作浏览器窗口的API 没有标准, 导致浏览器兼容性问题包括: window history loca ...
前端知识点总结——JS高级（持续更新中）
前端知识点总结--JS高级(持续更新中) 1.字符串什么是: 连续存储多个字符的字符数组相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...

前端知识点——Web Sockets

前端知识点——Web Sockets

API

WebSocket对象

例子

Socket.IO例

客户端

服务端

前端知识点——Web Sockets相关推荐

最新文章

热门文章