Web Sockets的目标是在一个单独的持久连接上提供全双工、双向通信。在Javascript中创建了Web Sockets之后,会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为Web Socket协议。也就是说,使用标准的HTTP服务器无法实现Web Sockets,只有支持这种协议的专门服务器才能正常工作。

由于Web Sockets使用了自定义的协议,所以URL模式也略有不同。未加密的连接不再是http://,而是ws://;加密的连接也不是https://,而是wss://。在使用Web Sockets URL时,必须带着这个模式,因为将来还有可能支持其他模式。

使用自定义协议而非HTTP协议的好处

  能够在客户端和服务器之间发送非常少量的数据,而不必担心HTTP那样字节级的开销。由于传递的数据包很小,因此Web Sockets非常适合移动应用。毕竟对移动应用而言,带宽和网络延迟都是关键问题。

自定义协议的缺点

制定协议的时间比制定Javascript API的时间还要长。
存在一致性和安全性问题。

支持Web Sockets的浏览器:Firefox6+、Safari5+、Chrome、iOS4+版的Safari。

(1)Web Sockets API

创建Web Socket,实例一个WebSocket对象并传入要连接的URL:
var socket = new WebSocket("ws://www.example.com/server.php");

注:
必须给WebSocket构造函数传入绝对URL。同源策略对Web Sockets不适用,因此可以通过它打开到任何站点的连接。至于是否会与某个域中的页面通信,则完全取决于服务器。(通过握手信息就可以知道请求来自何方。)

WebSocket表示当前状态的readyState属性:
* WebSocket.OPENING(0):正在建立连接。
* WebSocket.OPEN(1):已经建立连接。
* WebSocket.CLOSING(2):正在关闭连接。
* WebSocket.CLOSE(3):已经关闭连接。

关闭Web Socket连接:
socket.close();

调用了close()之后,readyState的值立即变为2(正在关闭),而在关闭连接后就会变成3。

(2)发送和接收数据

向服务器发送数据,使用send()方法并传入任意字符串:

var socket = new WebSocket("ws://www.example.com/server.php");
socket.send("Hello World!");

因为Web Sockets只能通过连接发送纯文本数据,所以对于复杂的数据结构,在通过连接发送之前,必须序列化。

如:
var message = {
time: new Date(),
text: "Hello World!",
clientId: "asdfp8734req"
};
socket.send(JSON.stringify(message));

当服务器向客户端发送消息是,WebSocket对象就会触发message事件:

socket.onmessage = function(event){
var data = event.data;
//处理数据
//event.data返回的数据也是字符串
};

(3)其他事件

* open:在成功建立连接时触发。
* error:在发生错误时触发,连接不能持续。
* close:在连接关闭时触发。

WebSocket对象不支持DOM2级事件侦听器,必须使用DOM0级语法分别定义每个事件处理程序。

 1 var socket = new WebSocket("ws://www.example.com/server.php");
2 socket.onopen = function(){
3 alert("Connection established.");
4 };
5 socket.onerror = function(){
6 alert("Connection error.");
7 };
8 socket.onclose = function(){
9 alert("Connection closed.");
10 };

只有close事件的event对象有额外的信息。

三个额外属性:
wasClean:布尔值,表示连接是否已经明确的关闭;
code:服务器返回的数值状态码;
reason:一个字符串,包含服务器发回的消息。

可以吧这些信息显示给用户,也可以记录到日志中以便将来分析:

socket.onclose = function(event){
console.log("Was clean?" + event.wasClean + " Code=" + event.code + " Reason=" + event.reason);
};

Javascript Ajax总结——其他跨域技术之Web Sockets的更多相关文章

  1. 06: AJAX全套 & jsonp跨域AJAX

    目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...

  2. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  3. ajax请求ashx跨域问题解决办法

    ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng  ...

  4. javascript跨域请求RESTful Web Service

    跨域请求RESTful Web Service 当我们用js请求RESTful Web Service的时候,通常会出现跨域无法访问的问题,也就是无法正常得到我们要的值.jsonp是个解决问题的方法. ...

  5. 原生JavaScript封装的jsonp跨域请求

    原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. JavaScript JSON AJAX 同源策略 跨域请求

    网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...

  7. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  8. (转)jquery ajax使用及跨域访问解决办法

    原文地址:***/UIweb/jquery_ajax_kuayujiejue.html 最近开发中,设计到智能手机项目,给领导做几个demo.主要是用jquery和jqeury mobile. 越来越 ...

  9. Ajax【介绍、入门、解决Ajax中文、跨域、缓存】

    什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...

  10. JavaScript使用jsonp实现跨域

    为什么要把ajax跨域写一下呢,因为ajax跨域并不是想跨就能跨的.因为为了安全,ajax是不允许跨域的. 举个例子,你有一个卖水果的网站,你的ajax请求另一个网站提供的图片,正常的时候,图片是一个 ...

随机推荐

  1. pygame 入门实例教程 1 - 复古方块赛车游戏

    作者自我介绍:大爽歌, b站小UP主 ,直播编程+红警三 ,python1对1辅导老师 . 本教程步骤明确,过程清晰简明,最终代码量250行上下,适合学习pygame的新手. 项目代码已上传到我的gi ...

  2. SpringBoot + 自定义注解,实现用户操作日志(支持SpEL表达式)

    背景 一个成熟的系统,都会针对一些关键的操作,去创建用户操作日志. 比如: XX人创建了一条订单,订单号:XXXXXXXXX 因为操作人或者订单号是动态的,所以有些开发人员,不知道获取,就将这种操作日 ...

  3. 月工资不到10元的内容审核专员? - ChatGPT 在内容自动审查中的应用

    内容过滤筛查是指对网络上发布或传播的文本.图片.视频等内容进行审核和监管,以防止出现违法违规.暴力色情.虚假广告.电信诈骗等现象,维护网络安全和社会秩序. 内容过滤筛查是一个亟待解决的问题,因为网络内 ...

  4. 两个例子带你入门 Disruptor

    Disruptor 是英国外汇交易公司 LMAX 开发的一个高性能队列.很多知名开源项目里,比如 canal .log4j2. storm 都是用了 Disruptor 以提升系统性能 . 这篇文章, ...

  5. 「codeforces - 687D」Dividing Kingdom II

    link. 好题啊. 首先有一个类 kruskal 暴力,就是对于每一个询问,把所有边按权值大小排降序,第一个加进去成为奇环的边就是答案.注意我们不需要关注偶环长成什么样子,所以我们实际上维护的是一棵 ...

  6. mpi转以太网连接300PLC与施耐德 Quantum PLC 通讯

    S7300 PLC转以太网无需编程与施耐德 Quantum PLC modbusTCP通信 方案介绍: 西门子300PLC转以太网不需要编写程序通过兴达易控MPI-ETH-XD1.0与施耐德 Quan ...

  7. maven缺失ojdbc6解决方法(手动安装ojdbc6)

    maven缺失ojdbc6解决方法(手动安装ojdbc6) 1. 首先下载ojdbc6jar包 jar下载地址一(需登录) jar下载地址二(直接下载) 2. 进入到jar包所在文件夹,执行cmd命令 ...

  8. NineData SQL 窗口支持深色模式,让程序员不再怕长期用眼!

    您有没有尝试过被明亮的显示器闪瞎眼的经历? 在夜间或低光环境下,明亮的界面会导致许多用眼健康问题,例如长时间使用导致的眼睛疲劳.干涩和不适感,同时夜间还可能会抑制褪黑素分泌,给您的睡眠质量带来影响. ...

  9. 基于 P-Tuning v2 进行 ChatGLM2-6B 微调实践

    微调类型简介 1. SFT监督微调:适用于在源任务中具有较高性能的模型进行微调,学习率较小.常见任务包括中文实体识别.语言模型训练.UIE模型微调.优点是可以快速适应目标任务,但缺点是可能需要较长的训 ...

  10. 如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

    序: 这几年观察下来,大部分做物联网三维可视化解决方案的企业或个人, 基本都绕不开3D机房.包括前面也讲过这样的案例<使用webgl(three.js)创建自动化抽象化3D机房,3D机房模块详细 ...