详细解读一个简单+

,附带完整的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实例教程的更多相关文章

  1. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  2. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

  4. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4

    5.2.2 让瀑布流动起来 打好基建之后,就需要写JavaScript代码.首先如果数据不够显示一屏幕的情况,就用新数据来补足它,在补充的时候是根据4列中最矮的那一个为优先补充,因为高矮尺寸一般只有在 ...

  5. html5 websocket + node.js 实现网页聊天室

    1 client:    socket.io server:   node.js +  express  + socket.io 一个简单的聊天室  demo,没有注册,内置了一些测试用户 2 cli ...

  6. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  7. Web 开发中应用 HTML5 技术的10个实例教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  8. 值得 Web 开发人员收藏的20个 HTML5 实例教程

    当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...

  9. HTML5和CSS3实例教程 中文版 高清PDF扫描版

    HTML5和CSS3实例教程共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.首先是规范概述,介绍了新的结构化标签.表单域及其功能(包括自动聚焦功能和占位文本)和CSS3的新选择器.接 ...

随机推荐

  1. mailto - 简单多媒体邮件发送程序

    SYNOPSIS mailto  [-a] [-c] [-s] [recipient name(s)] DESCRIPTION mailto 程序是一个用于发送MIME格式的多媒体邮件(MIME格式是 ...

  2. MATLAB的边缘检测函数中隐含的细化（非极大值抑制）算法

    前段时间做了一个车牌检测识别的项目,我的任务是将MATLAB中的算法移植成C++代码.在车牌区域提取的过程中,用到了水平方向的Sobel算子检测垂直边缘,一开始我直接把MATLAB中的 bw = ed ...

  3. hashlib模块和logging模块

    hashlib Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 我们以常见的摘要算法MD5为例,计算出一个字符串的MD5值: import hashlib m=hashli ...

  4. CF547E Mike and Friends

    子串看起来就很SuffixStructures 于是上SAM 本来想着直接LCT 后来发现没法串定位(暴力匹配复杂度不对) 然后就离线吧,先建出来然后链加子树和,树剖就odk. 其实更直接的套路是线段 ...

  5. python 文件夹下文件及文件夹名称获取

    import os dirct = 'D:/data' dirList=[] fileList=[] files=os.listdir(dirct) #文件夹下所有目录的列表 print('files ...

  6. Linux发行版和内核版本

    1./etc/issue 和 /etc/redhat-release都是系统安装时默认的发行版本信息,通常安装好系统后文件内容不会发生变化. 2.lsb_release -a :FSG(Free St ...

  7. vueroute的router.addRoutes

    router.addRoutes(routes: Array<RouteConfig>)动态添加更多路由到路由器.参数必须是使用与routes构造函数选项相同的路径配置格式的Array .

  8. reverse/inverse a mapping but with multiple values for each key

    reverse/inverse a mapping but with multiple values for each key multi mappping dictionary , reverse/ ...

  9. React Native 中 static的navigationOptions中的点击事件不能用this

    想在某个页面中设置导航栏,title + 左右按钮(按钮上肯定需要有事件) static navigationOptions = ({ navigation, navigationOptions }) ...

  10. mysql TOP语句 语法

    mysql TOP语句 语法 作用:用于规定要返回的记录的数目. 语法:SELECT column_name(s) FROM table_name LIMIT number 说明:对于拥有数千条记录的 ...