(1) 首先, 晒一下结果
体验地址, 这是我的个人网站, 中间一个模块是聊天室: 链接标题
(2) 那么, 什么是 websocket
WebSocket 是一种网络通信协议, 很多高级功能都需要它
那么我们有了 HTTP 协议, 为啥还需要另外一个协议呢? 答案很简单, 因为 HTTP 协议有一个缺陷: 通信只能由客户端发起
最典型的场景就是聊天室, 假如用 HTTP 协议的话, 就只能去轮询获取服务端有没有消息了, 而用 WebSocket 的话, 服务端有新消息可以自动推送
WebSocket 协议在 2008 年诞生, 2011 年成为国际标准所有的浏览器都已经支持了
特点:
(1) 服务端可以主动推送信息, 属于服务器推送技术的一种
(2) 建立在 TCP 协议之上, 服务端的实现比较容易
(3) 与 HTTP 协议有着良好的兼容性, 默认端口也是 80 和 443, 并且握手阶段采用 HTTP 协议, 因此握手时不容易屏蔽, 能通过各种 HTTP 代理服务器
(4) 数据格式比较轻量, 性能开销小, 通信高效
(5) 可以发送文本, 也可以发送二进制数据
(6) 没有同源限制, 客户端可以与任意服务器通信
(7) 协议标识符是 ws(如果加密, 则为 wss), 服务器网址就是 URL
(3) 主要客户端 API
(1)WebSocket 构造函数
var ws = new WebSocket(ws://localhost:8080);
执行上面的语句之后, 客户端就会与服务器进行连接
(2)webSocket.readyState
readyState 属性返回实例对象的当前状态, 共有四种 CONNECTING: 值为 0, 表示正在连接 OPEN: 值为 1, 表示连接成功, 可以通信了 CLOSING: 值为 2, 表示连接正在关闭 CLOSED: 值为 3, 表示连接已经关闭, 或者打开连接失败
(3)webSocket.onopen
实例对象的 onopen 属性, 用于指定连接成功后的回调函数
ws.onopen = function(){}
如果要指定多个回调函数, 可以使用 addEventListener 方法
- ws.addEventListener(open,function(event){});
- (4)webSocket.onclose
实例对象的 onclose 属性, 用于指定连接关闭后的回调函数
(5)webSocket.onmessage
实例对象的 onmessage 属性, 用于指定收到服务器数据后的回调函数
注意, 服务器数据可能是文本, 也可能是二进制数据 (blob 对象或 Arraybuffer 对象)
(6)webSocket.send()
实例对象的 send() 方法用于向服务器发送数据
(7)webSocket.bufferedAmount
实例对象的 bufferedAmount 属性, 表示还有多少字节的二进制数据没有发送出去, 它可以用来判断发送是否结束
(8)webSocket.onerror
实例对象的 onerror 属性, 用于指定报错时的回调函数
再推一波, 哈哈, 体验地址, 这是我的个人网站, 中间一个模块是聊天室: 链接标题
感兴趣的小伙伴可以试试
来源: http://www.qdfuns.com/article/35439/4887f21cc3f8473b40a62206046fc050.html