html5 WebSocket的Js实例教程
详细解读一个简单+
,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读。
从WebSocket通讯三个阶段(打开握手、数据传递、关闭握手)进行了探讨,各阶段中浏览器和服务器做了些什么事情也有所涉及。
//检查浏览器是否支持WebSocket if(window.WebSocket){ console.log('This browser supports WebSocket'); }else{ console.log('This browser does not supports WebSocket'); }
Html演示代码

<!DOCTYPE html> <meta charset="utf-8" /> <title>WebSocket Test</title> <script language="javascript"type="text/javascript"> var wsUri ="ws://echo.websocket.org/"; var output; function init() { output = document.getElementById("output"); testWebSocket(); } function testWebSocket() { websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { onOpen(evt) }; websocket.onclose = function(evt) { onClose(evt) }; websocket.onmessage = function(evt) { onMessage(evt) }; websocket.onerror = function(evt) { onError(evt) }; } function onOpen(evt) { writeToScreen("CONNECTED"); doSend("WebSocket rocks"); } function onClose(evt) { writeToScreen("DISCONNECTED"); } function onMessage(evt) { writeToScreen('<span style="color: blue;">RESPONSE: '+ evt.data+'</span>'); websocket.close(); } function onError(evt) { writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data); } function doSend(message) { writeToScreen("SENT: " + message); websocket.send(message); } function writeToScreen(message) { var pre = document.createElement("p"); pre.style.wordWrap = "break-word"; pre.innerHTML = message; output.appendChild(pre); } window.addEventListener("load", init, false); </script> <h2>WebSocket Test</h2> <div id="output"></div> </html>

二、主要代码解读:
1、申请一个WebSocket对象
参数是需要连接的服务器端的地址,同http协议使用http://开头一样,WebSocket协议的URL使用ws://开头,另外安全的WebSocket协议使用wss://开头。
var wsUri ="ws://echo.websocket.org/"; websocket = new WebSocket(wsUri);
2、WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror
我们可以看出所有的操作都是采用消息的方式触发的,这样就不会阻塞UI,使得UI有更快的响应时间,得到更好的用户体验。
(1)当Browser和WebSocketServer连接成功后,会触发onopen消息;
websocket.onopen = function(evt) {};
(2)如果连接失败,发送、接收数据失败或者处理数据出现错误,browser会触发onerror消息;
websocket.onerror = function(evt) { };
(3)当Browser接收到WebSocketServer发送过来的数据时,就会触发onmessage消息,参数evt中包含server传输过来的数据;
websocket.onmessage = function(evt) { };
(4)当Browser接收到WebSocketServer端发送的关闭连接请求时,就会触发onclose消息。
websocket.onclose = function(evt) { };
本文参考地址:https://www.cnblogs.com/tinywan/p/5894403.html
html5 WebSocket的Js实例教程的更多相关文章
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4
5.2.2 让瀑布流动起来 打好基建之后,就需要写JavaScript代码.首先如果数据不够显示一屏幕的情况,就用新数据来补足它,在补充的时候是根据4列中最矮的那一个为优先补充,因为高矮尺寸一般只有在 ...
- html5 websocket + node.js 实现网页聊天室
1 client: socket.io server: node.js + express + socket.io 一个简单的聊天室 demo,没有注册,内置了一些测试用户 2 cli ...
- 《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...
- Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- 值得 Web 开发人员收藏的20个 HTML5 实例教程
当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...
- HTML5和CSS3实例教程 中文版 高清PDF扫描版
HTML5和CSS3实例教程共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.首先是规范概述,介绍了新的结构化标签.表单域及其功能(包括自动聚焦功能和占位文本)和CSS3的新选择器.接 ...
随机推荐
- Nginx 配置状态信息虚拟主机
可以在浏览器中查看并发数量 [root@Liangenyu conf]# vim nginx.conf server { listen 80; server_name status.etiantian ...
- Qt中添加自定义信号和槽带来的一些问题
背景: 自己定义了一个类,并在类中添加了槽函数 class XImage : public QWidget { public: XImage(QWidget *p = 0); //重载绘制方法 upd ...
- bzoj4810 [Ynoi2017]由乃的玉米田 莫队+bitset(+数论)
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4810 题解 看数据范围和题目名字应该是根号算法. 因为询问除了区间外,还有第 \(3\) 个参 ...
- ACM/IOI 国家队集训队论文集锦
转自:https://blog.csdn.net/txl199106/article/details/49227067 国家集训队1999论文集 陈宏:<数据结构的选择与算法效率——从IOI98 ...
- Django【第23篇】:利用Form组件和ajax实现的注册
利用Form组件和ajax实现的注册 一.注册相关的知识点 1.Form组件 我们一般写Form的时候都是把它写在views视图里面,那么他和我们的视图函数也不影响,我们可以吧它单另拿出来,在应用下面 ...
- SpringBoot配置自定义美化Swagger2
1.添加maven依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springf ...
- Python---进阶---捕获异常
一.编写一个计算减法的方法,当第一个数小于第二个数时,抛出“被减数不能小于减数”的异常 ------------------------------------------------- def ji ...
- day3 ord,chr,random,string
day3复习 >>> for i in range(10): ... if i == 3: ... break ... print(i) ... 0 1 2 >>> ...
- 【机器人M号】题解
题目 题目描述 3030年,Macsy正在火星部署一批机器人. 第1秒,他把机器人1号运到了火星,机器人1号可以制造其他的机器人. 第2秒,机器人1号造出了第一个机器人--机器人2号. 第3秒,机器人 ...
- 岭回归、lasso
参考:https://blog.csdn.net/Byron309/article/details/77716127 ---- https://blog.csdn.net/xbinwor ...