WebSocket 是为了在一个单独的持久连接上提供全双工的双向通信。有关WebSocket API的内容可以参考这里

这里简单说明下WebSocket在javascript中的用法。

1 WebSocket连接简述

在JavaScript中创建了WebSocket 后,会有一个HTTP请求发送到浏览器发起连接。在取得服务器响应后,建立的连接会从HTTP协议交换为WebSocket协议。所以需要后台web服务器也支持WebSocket才能正常通信。

2 WebSocket API

2.1 实例化WebSocket

创建WebSocket,要先实例化一个WebSocket对象,如下:

var socket = new WebSocket('ws://game.example.com:12010/updates');

实例化的时候需要传入要连接的URL以及其他参数。注意到这里URL连接使用的是自定义的协议'ws://'而并非'http://'。如果是加密连接的话,则使用'wss://'。传入的URL也需要是绝对URL。

使用自定义协议的好处

使用自定义协议(ws,wss)而非HTTP协议的好处是,能够在客户端和服务器之间发送非常少量的数据。由于传递的数据包很小,因此WebSocket很适合移动应用。

2.2 WebSocket的readyState属性.

用来表示连接的状态.

CONNECTING (numeric value 0) //正在连接
    The connection has not yet been established.
OPEN (numeric value 1) //已经连接
    The WebSocket connection is established and communication is possible.
CLOSING (numeric value 2)  //正在关闭
    The connection is going through the closing handshake, or the close() method has been invoked.
CLOSED (numeric value 3)  //已关闭
    The connection has been closed or could not be opened.

2.3 发送和接收数据

WebSocket打开之后,就可以通过连接发送和接收数据.使用send()方法向服务器发送数据.

var socket = new WebSocket('ws://game.example.com:12010/updates');
socket.send("this is a demo");

对于有复杂的数据结构的消息(比如dict),发送之前要进行JSON的序列化。

var message = {
time: new Date(),
text: "Hello world!",
clientID: "xxxxx"
};
socket.send(JSON.stringify(message));

当服务器向客户端发来消息时,WebSocket对象会触发message事件。返回的数据保存在event.data中。

socket.onmessage = function(event){
var data = event.data;
//...
}

WebSocket的其他事件。

open: 在成功建立连接时触发。

error: 在发生错误时触发,连接不能持续。

close: 在连接关闭时触发。

aaarticlea/png;base64,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" alt="" />

2.4 关闭WebSocket连接

使用close()方法可以关闭WebSocket连接。

socket.close()

调用之后readyState指变为2,连接关闭后变为3.

WebSockets的更多相关文章

  1. html5 Websockets development guidance

    1. WebSockets -- full-duplex communication The main HTML5 pillars include Markup, CSS3, and JavaScri ...

  2. 使用wireshark抓包分析浏览器无法建立WebSocket连接的问题(server为Alchemy WebSockets组件)

    工作时使用了Websocket技术,在使用的过程中发现,浏览器(Chrome)升级后可能会导致Websocket不可用,更换浏览器后可以正常使用. 近日偶尔一次在本地调试,发现使用相同版本的Chrom ...

  3. HTML5之 WebSockets

    ------- 新的网络连接技术 - Web-Sockets 持续连接数据流 全双工工作方式 http补充品而非替代品 - 应用场景 聊天室 股票显示 在线游戏(尤为突出) - 2byte的通信 1b ...

  4. Ratchet(WebSockets for PHP)的官方TUTORIALS 的实践

    前几天稍微看了一下Ratchet,并且实践了一下它官方例子.所以现在就将实践的过程记录下来. 在具体实践之前先将Ratchet是什么东东,要先说明一下.以下的英文是从官方copy过来的 Ratchet ...

  5. Why SignalR does not use WebSockets?

    Why SignalR does not use WebSockets?   As you probably know SignalR supports multiple transports. Th ...

  6. SSE && WebSockets

    SSE && WebSockets 参考 http://www.bitscn.com/school/HTMLCSS/201402/194940.html WebSockets 定义了一 ...

  7. iOS开展-clang: error: unknown argument: '-websockets'解决方案

    问题: 昨天莫名其妙Xcode自己主动升级,那么今天之前执行project什么时候,不知怎的,他们都获得了. 错误内容: clang: error: unknown argument: '-webso ...

  8. HTML5分析实战WebSockets基本介绍

    HTML5 WebSockets规范定义了API,同意web使用页面WebSockets与远程主机协议的双向交流. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络.HTML5 We ...

  9. HTML5分析实战WebSockets一个简短的引论

    HTML5 WebSockets规范定义了API,同意web页面使用WebSockets与远程主机协议的双向通信. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络. HTML5 W ...

  10. Long-Polling, Websockets, SSE(Server-Sent Event), WebRTC 之间的区别

    在下面的示例中,客户端指的是浏览器,服务器指的是网站服务器主机. 为了更好的理解这些知识点,你应该简单了解典型的http网站是如何工作的. 普通的http: 客户端从服务器端请求网页 服务器作出相应的 ...

随机推荐

  1. [JZOJ6258] 【省选模拟8.9】轰炸

    题目 题目大意 给你一棵树和树上的许多条从后代到祖先的链,选择每条链需要一定代价,问覆盖整棵树的所有点的最小代价是多少. \(n,m\leq 100000\) 正解 (由于时间过于久远,所以直接说正解 ...

  2. 2019云栖大会开幕,5G边缘计算成首日焦点

    9月25日,全球顶尖科技盛会——2019云栖大会如期上演,1000余位当代技术领军人物与数万名开发者集结杭州,聚焦数字经济,共话面向未来20年的基础科学.科技创新与应用突破.其中,边缘计算技术领域因5 ...

  3. day30 python类的继承,抽象类等

    Python之路,Day17 = Python基础17-面向对象入门 继承 class Student(People): pass print(Student.__bases__) # 查看 Stud ...

  4. csps模拟92数列,数对,最小距离题解

    题面:https://www.cnblogs.com/Juve/articles/11767225.html 数列: 简化题意:已知a,b,c,求满足$a*x+b*y=c$的$x+y$最小值 然后ex ...

  5. 「题解」:[loj2763][JOI2013]现代豪宅

    问题 A: 现代豪宅 时间限制: 1 Sec  内存限制: 256 MB 题面 题目描述 (题目译自 $JOI 2013 Final T3$「現代的な屋敷」) 你在某个很大的豪宅里迷路了.这个豪宅由东 ...

  6. VC 复制移动删除重命名文件文件

    说明: 1.以下封装了4个函数_CopyFile,_DeleteFile,_MoveFile,_ReNameFile 2.每个函数都先拷贝了原来的路径,保证了路径是以2个\0\0结尾.(如果不以2个\ ...

  7. 现金贷平台下载量TOP100 涉逾30家P2P

    一.什么是现金贷,现状如何 那么什么是现金贷呢?在笔者看来,狭义的现金贷主要是指基于互联网等技术手段的小额现金贷款,广义的现金贷可以包括任何以小额现金和存款为标的进行借贷的行为,是一种无担保.无抵押. ...

  8. day 49 Bootstrap框架和inconfont、font-awesome使用

    Bootstrap框架和inconfont.font-awesome使用   iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580 ...

  9. UMP系统功能 资源管理

  10. uboot 的移植过程

    1. 工作用户 uboot 2. u­boot 版本 1.1.4 3. 工具链 2.95.3 步骤 我们为开发板取名叫: crane2410, 并在 u­boot 中建立自己的开发板类型 修改 Mak ...