详细解读一个简单+

,附带完整的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. Nginx 服务器配置

    include:实现对配置文件所包含的文件设定 default_type:默认类型二进制流,当文件类型未定义使用这种方式,用浏览器访问 PHP 文件会出现 下载窗口 log_format:指定日志输出 ...

  2. 十一、Boostrap-X-editable

    一.官网 http://vitalets.github.io/x-editable/index.html 二.实践 在jQuery中ajax配置项中的使用type与method的区别: type 和m ...

  3. CSS的优先级理解

    样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...

  4. Python3找出List中最大_最小的N个数及索引

    # -*- coding: utf-8 -*- import heapq nums = [1, 8, 2, 23, 7, -4, 18, 23, 24, 37, 2] # 最大的3个数的索引 max_ ...

  5. GUI学习之二十——QAbstractSlider学习总结

    今天学习一种全新的输入控件——QAbstractSlider()滑块控件的基础控件. 一.描述: QAbstractSlider()是QWidget()的子类,提供了一个范围内的整数值.它是QSlid ...

  6. 基于jQuery封装的分页组件（可自定义设置）

    jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...

  7. sql视频学习关键笔记(自用记单词与学习用)

    sql字段类型 numeric(18,3)-18位整数加3位小数点(货币计量最好选这类型) sql关键字 insert. update. delete alter grant 授权. revoke 回 ...

  8. java:在Conllection接口中实际上也规定了两个可以将集合变成对象数组的操作

    在Conllection接口中实际上也规定了两个可以将集合变成对象数组的操作 //在Conllection接口中实际上也规定了两个可以将集合变成对象数组的操作 List<String> a ...

  9. vue的生产环境dependencies 和开发环境devDependencies，二者的理解和区别

  10. ORB an efficient alternative to SIFT or SURF

    AbstractFeature matching is at the base of many computer vision problems, such as object recognition ...