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. CSS压缩

    通过W3C 统一验证工具的检测没有错误后,为了提高加载速度和节约空间(相对来说,css量很少的情况下,几乎没啥区别),可以通过css压缩工具把css进行压缩. w3c css压缩 http://too ...

  2. thinkphp 定界符

    模板文件可以包含普通模板标签和XML模板标签,标签的定界符都可以重新配置. 大理石平台厂家 普通标签 内置模板引擎的普通模板标签默认以{ 和 } 作为开始和结束标识,并且在开始标记紧跟标签的定义,如果 ...

  3. Vue-组件详解

    转载:https://segmentfault.com/a/1190000015199363 查看原文站点,更多扩展内容及更佳阅读体验! 组件详解 组件与复用 Vue组件需要注册后才可以使用.注册有全 ...

  4. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  5. PAT甲级——A1119 Pre- and Post-order Traversals【30】

    Suppose that all the keys in a binary tree are distinct positive integers. A unique binary tree can ...

  6. 安装MySql社区版(35-3)

    1,https://dev.mysql.com/ --------------------------------------------------------------------------- ...

  7. 初识OpenCV-Python - 002: Drawing functions

    使用OpenCV-Python 的画图函数画图. 本次的图形函数有: cv2.line(), cv2.circle(), cv2.rectangle(), cv2.ellipse(), cv2.put ...

  8. <day006>bootstrap的简单学习 + 轮播图

    任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

  9. Java基础 ----- 判断对象的类型

    1. 判断对象的类型:instanceOf 和 isInstance 或者直接将对象强转给任意一个类型,如果转换成功,则可以确定,如果不成功,在异常提示中可以确定类型 public static vo ...

  10. js 调用接口并传参

    注:需先引入 jquery.json-xx.min.js 1. 参数跟在url后面 var name = '王一'; var age = 18; $.ajax({ type : 'get', url ...