HTML5 WebSocket 详解及使用

WebSocket 没用过的同学，听上去，可能觉得很难，其实很简单，本章讲解了WebSocket基本信息，以及附有代码例子

WebSocket 是什么？

WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。（双向通信协议）

WebSocket 的作用？

实现客户端与服务器之间的双向通信，允许服务端主动向客户端推送数据。

在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket 和 HTTP 区别？

相同点：

1. WebSocket 都是一样基于 TCP 的可靠性传输协议；

异同点：

1. WebSocket  可以双向发送或接受信息，而 HTTP 是单向的（HTTP 通信只能由客户端发起，不具备服务器主动推送能力）；

2. WebSocket  的使用，需要先进行一次客户端与服务器的握手，两者建立连接后才可以正常双向通信，而 HTTP 是一个 主动的 Request 对应一个 被动的Response；

WebSocket 的协议标识符？

如果服务器网址是 HTTP 那么 WebSocket  对应的是 ws

如果服务器网址是 HTTPS 加密的那么 WebSocket  对应的是 wss

WebSocket 的作用总结？

WebSocket  是为了能够实现在 web 应用上与服务器进行双向通信的需求而产生出来的协议，

相比于轮询 HTTP 请求的方式，WebSocket 节省了服务器资源，有效的提高了效率。

WebSocket 常用方法

常用方法描述

Socket.send() 通过 Socket 向服务器发送信息

Socket.close() 关闭 Socket 连接

WebSocket 常用属性

常用属性 描述

Socket.readyState 获取当前链接状态 0:正在连接中，1:连接正常可以通信，2:连接关闭中，3:连接已关闭/连接失败

Socket.url 获取当前连接地址

Socket.binaryType 获取传输的数据类型

WebSocket 生命周期

生命周期 描述

Socket.onopen 连接建立时触发

Socket.onmessage 客户端接收服务端数据时触发

Socket.onerror 通信发生错误时触发

Socket.onclose 连接关闭时触发

// 设定默认值
var websock = null;// 每10分钟 通过 websocket 向服务器发送一次心跳 证明客户端没有离线 依然在线可以正常接受消息
setInterval(this.websocketsend, 100000);initWebsocket() {/** 初始化 websock* 连接 服务器地址* 并绑定 websock 四个事件方法*/this.websock = new WebSocket('ws://localhost:8080?userId=1');// 接收服务器返回的数据this.websock.onmessage = this.websocketonmessage;// 连接建立时触发this.websock.onopen = this.websocketonopen;// 连接中发生异常this.websock.onerror = this.websocketonerror;// 连接关闭时触发this.websock.onclose = this.websocketclose;
}websocketonopen() {/** websocket 初始化后 执行的方法* 调用 发送数据方法    */this.websocketsend();
},websocketonerror() {/** websocket 连接建立失败 执行的方法* 注：我这里加了个判断，如果联系建立失败就在连接几次*/if(this.cishu < 5){this.cishu = this.cishu + 1;this.initWebsocket();}
},websocketsend() {/** websocket 数据发送 通过 websock.send() 方法向服务器发送数据* 注：这里随便发哈，主要作用就是通过这个动作，让客户端与服务端建立联系*/let actions = {"test": "12345"};this.websock.send(JSON.stringify(actions));
},websocketclose(e) { /** websocket 连接关闭 执行的方法*/console.log('断开连接', e);
},websocketonmessage(e) {/** websocket 数据接收 执行的方法* 注：服务器通过 websocke 向客户端发送数据时，这里的方法就会自动触发啦*/const redata = JSON.parse(e.data);switch (redata.messageType) {case 0: // 售后 提示// ... 执行break;case 1: // 库存 提示// ... 执行break;case 2: // 下架 提示// ... 执行break;}
},

HTML5 WebSocket 详解及使用相关推荐

【转】WebSocket详解（一）：初步认识WebSocket技术
1.前言 HTML5规范在传统的web交互基础上为我们带来了众多的新特性,随着web技术被广泛用于web APP的开发,这些新特性得以推广和使用,而websocket作为一种新的web通信技术具有巨大 ...
WebSocket详解（一）：初步认识WebSocket技术
WebSocket详解(一):初步认识WebSocket技术 1.前言 HTML5规范在传统的web交互基础上为我们带来了众多的新特性,随着web技术被广泛用于web APP的开发,这些新特性得以推广 ...
webSocket详解
前言本文会用实例的方式,将iOS各种IM的方案都简单的实现一遍.并且提供一些选型.实现细节以及优化的建议. 注:文中的所有的代码示例,在github中都有demo: iOS即时通讯,从入门到&quo ...
WebSocket 详解
WebSocket 出现前构建网络应用的过程中,我们经常需要与服务器进行持续的通讯以保持双方信息的同步.通常这种持久通讯在不刷新页面的情况下进行,消耗一定的内存资源常驻后台,并且对于用户不可见.在 ...
HTML5 入门详解
1. 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言. HTML5定义了一系列 ...
WebSocket 详解 1
更多文章,请在Github blog查看 WebSocket 出现前构建网络应用的过程中,我们经常需要与服务器进行持续的通讯以保持双方信息的同步.通常这种持久通讯在不刷新页面的情况下进行,消耗一定的 ...
html5拖放详解,HTML5拖拽/拖放(drag drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - drag 在元 ...
八、HTML5之详解二
本文主要内容拖拽历史地理位置全屏拖拽如上图所示,我们可以拖拽博客园网站里的图片和超链接. 在HTML5的规范中,我们可以通过为元素增加 draggable="true" ...
easyui html5主题,详解easyui 切换主题皮肤
1.需要导入的文件(我这里的easyui是jquery-easyui-1.6.11版本) 主要实现原理就是换导入css文件,这样就可以实现切换主题皮肤 2.前台页面定义了一个按钮(代码) 更换皮肤 d ...

HTML5 WebSocket 详解及使用

WebSocket 是什么？

WebSocket 的作用？

WebSocket 和 HTTP 区别？

WebSocket 的协议标识符？

WebSocket 的作用总结？

WebSocket 常用方法

WebSocket 常用属性

WebSocket 生命周期

HTML5 WebSocket 详解及使用相关推荐

最新文章

热门文章

常用方法	描述
Socket.send()	通过 Socket 向服务器发送信息
Socket.close()	关闭 Socket 连接

常用属性	描述
Socket.readyState	获取当前链接状态	0:正在连接中，1:连接正常可以通信，2:连接关闭中，3:连接已关闭/连接失败
Socket.url	获取当前连接地址
Socket.binaryType	获取传输的数据类型

生命周期	描述
Socket.onopen	连接建立时触发
Socket.onmessage	客户端接收服务端数据时触发
Socket.onerror	通信发生错误时触发
Socket.onclose	连接关闭时触发