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. VBA字典做数据有效性

    Private Sub Worksheet_SelectionChange(ByVal Target As Range)If Target.Column = 26 And Range("f& ...

  2. Java 仓储模式

    使用的Spring boot +Jpa 项目层级: common里包含了model,以及一些viewModel等等 下面就是设计的仓储模式 先看下SysUser: @MappedSuperclass ...

  3. DEV的GridControl控件的选中列属性设置高光

    设置Run Designer=>Views=> OptionsSelection下面的: EnableAppearanceFocusedCell = False,//鼠标移开,失去焦点,仍 ...

  4. vue3环境搭建以及创建简单项目。

    1.环境准备,以下都是我的版本.自己在官网上面下载需要的版本. 尝试了Python3.7.3在创建vue3项目时出现问题. node.js10.16.0, python2.7.16, yarn1.16 ...

  5. 透彻理解并掌握JavaScript的this

    前言 无论是JavaScript新手还是老手,JavaScript中的this关键词可能都会令你困惑.本文旨在透彻地阐述this.读完本文,就再也不用怕JavaScript中的this了.你将会知道在 ...

  6. 网站统计中的PV-UV-IP的定义与区别

    --------首先来看看ip.uv和pv的定义---------- PV(访问量):即Page View, 即页面浏览量或点击量,用户每次刷新即被计算一次.UV(独立访客):即Unique Visi ...

  7. tp5 mkdir() 没有权限

  8. 使用Math.random()函数生成n到m间的随机数字

    使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备,Math.random()函数返回0和1之间的伪随机数 讲解: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后期的j ...

  9. wpf 纯样式写按钮

    <!--自定义按钮样式--> <LinearGradientBrush x:Key="LinearGradientBlueBackground" EndPoint ...

  10. java_static关键字

    /** * static关键字:静态关键字 * 静态优先于非静态加载到内存中(静态优先于对进入到内存中) * 被static修饰的成员变量不能被序列化的,序列化的都是对象 * transient关键字 ...