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. C++之constexpr

    一.常量表达式:是指值不会改变并且在编译过程就能得到计算结果的表达式.一个对象是不是常量表达式是由它的数据类型和初始值共同决定. ;//虽然初始值是字面值常量,但是它的数据类型只是普通int. con ...

  2. 阿里云ECS发送邮件失败

    阿里云发送SMTP邮件失败   N多测试发现 阿里云服务器不能用25端口发邮件,配置465端口阿里云发送邮件是成功的 修改mail.rc 里的smtp 端口为465 配置如下 set from=*** ...

  3. MySQL 其他基础知识

    -- 查询存储引擎show engines;-- 显示可用存储引擎show variables like 'have%'; -- concat多个字段联合select tname ,cname ,co ...

  4. JavaScript 对象与函数

    对象参考手册 Array Boolean Date Math Number String RegExp Global 前言 在js中什么都是对象(包括函数). 函数是用来实现具体功能的代码,用一种方式 ...

  5. Docker保存日志到本地

    其实很简单 docker logs +你需要添加的额外参数 + 容器id >文件名称 然后查看这个文件就可以了,也可以通过ftp协议下载到本地

  6. 模式识别原理(Pattern Recognition)、概念、系统、特征选择和特征

    §1.1 模式识别的基本概念 一.广义定义 1.模式:一个客观事物的描述,一个可用来仿效的完善的例子. 2.模式识别:按哲学的定义是一个“外部信息到达感觉器官,并被转换成有意义的感觉经验”的过程. 例 ...

  7. LUOGU P2261 [CQOI2007]余数求和(数论分块)

    传送门 解题思路 数论分块,首先将 \(k\%a\) 变成 \(k-a*\left\lfloor\dfrac{k}{a}\right\rfloor\)形式,那么\(\sum\limits_{i=1}^ ...

  8. vue.js出现cannot get /错误

    config中的index.js 原来是 assetsPublicPath: './', 改为 assetsPublicPath: '/',

  9. day23_2_logging

    #!/usr/bin/env python# -*- coding:utf-8 -*-# ------------------------------------------------------- ...

  10. 2_1.springboot2.x配置之配置文件解析

    1.配置文件 1.Spring Boot使用一个全局的配置文件:•application.properties.application.yml 2.配置文件放在src/main/resources目录 ...