一、详细代码案例

详细解读一个简单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

WebSocket实战之JavaScript例子的更多相关文章

  1. WebSocket实战之——JavaScript例子

    一.详细代码案例 详细解读一个简单html5 WebSocket的Js实例教程,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读 ...

  2. WebSocket 实战（转）

    WebSocket 实战 本文介绍了 HTML5 WebSocket 的由来,运作机制及客户端和服务端的 API 实现,重点介绍服务端(基于 Tomcat7)及客户端(基于浏览器原生 HTML5 AP ...

  3. WebSocket 实战

    http://www.ibm.com/developerworks/cn/java/j-lo-WebSocket/ 本文介绍了 HTML5 WebSocket 的由来,运作机制及客户端和服务端的 AP ...

  4. linuxC编程实战 my_server.c例子问题总结

    今天看linux C 编程实战的my_server例子时,敲到这段代码,对其父子进程关闭socket 进行close调用产生疑问 如图中标注的三个close socket,思考子进程通信结束 关闭自己 ...

  5. WebSocket 实战--转

    原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-WebSocket/ WebSocket 前世今生 众所周知,Web 应用的交互过程通常是客户端 ...

  6. C# WebApi+Task+WebSocket实战项目演练(四)

    一.课程介绍 本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的第四部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集.整理 ...

  7. 用socket.io实现websocket的一个简单例子

    socket.io 是基于 webSocket 构建的跨浏览器的实时应用. 逛博客发现几个比较好的 一.用socket.io实现websocket的一个简单例子 http://biyeah.iteye ...

  8. WebSocket实战之————GatewayWorker使用笔记例子

    参考文档:http://www.workerman.net/gatewaydoc/ 目录结构 ├── Applications // 这里是所有开发者应用项目 │ └── YourApp // 其中一 ...

  9. 在线聊天室的实现(1)--websocket协议和javascript版的api

    前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...

随机推荐

  1. yii2: 点击编辑后，左侧的连接(a.navtab)失效，变成在新窗口打开

    如:图一 使用a.navtab的时候,点击[自定义回复]->右侧列表,随便编辑一个,完成后 图二: 再点击,左侧的菜单,打开iframe就会失败,直接在新窗口打开.源代码如下: 造成这样的原因是 ...

  2. css中实现显示和隐藏（转）

    CSS中的display和visibility      在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...

  3. HTML 中 id与name 区别

    一个name可以同时对应多个控件,比如checkbox和radio而id必须是全文档中唯一的 id的用途1) id是HTML元素的Identity,主要是在客户端脚本里用.2) label与form控 ...

  4. Elasticsearch Painless语言（实现搜索打分基础）

    With the release of Elasticsearch 5.x came Painless, Elasticsearch's answer to safe, secure, and per ...

  5. HAWQ取代传统数仓实践（七）——维度表技术之维度子集

    有些需求不需要最细节的数据.例如更想要某个月的销售汇总,而不是某天的数据.再比如相对于全部的销售数据,可能对某些特定状态的数据更感兴趣等.此时事实数据需要关联到特定的维度,这些特定维度包含在从细节维度 ...

  6. 第1章 Flex介绍

    * Flex Flex 是一个高效.免费的开源框架,可用于构建具有表现力的 Web应用程序,这些应用程序利用Adobe Flash Player和Adobe AIR, 可以实现跨浏览器.桌面和操作系统 ...

  7. 数据库需要支持emoji表情

    由于需要实现emoji表情评论的功能,所以数据库需要支持emoji表情的存储,根据查询的资料最终实现了该功能,现将实现的过程以及过程遇到的一些问题记录下来,供大家参考和交流. mysql的utf8编码 ...

  8. WDF - CSS 书写规范

    CSS已经写了很久了,但是感觉代码还是有点乱,不够漂亮.今天抽点时间整理一下手头上正在做的网站样式,顺带做一个自己比较适应的书写规范,以供以后参考.先暂时这样吧,其他以后再完善. 逻辑:大小 → 位置 ...

  9. I/O多路复用方案

    1. 本节思维导图 2. 基本的网络编程接口 2.1 基于TCP的通信模型 2.2 基于UDP的通信模型 3. 非阻塞的服务器程序 file.pipe.fifo.socket在默认创建过程中都是阻塞的 ...

  10. SCARA——OpenGL入门学习三

    OpenGL入门学习[三] 在第二课中,我们学习了如何绘制几何图形,但大家如果多写几个程序,就会发现其实还是有些郁闷之处.例如:点太小,难以看清楚:直线也太细,不舒服:或者想画虚线,但不知道方法只能用 ...