WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocol] );
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
 
WebSocket 属性
以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：
 
属性  描述
Socket.readyState 
只读属性 readyState 表示连接状态，可以是以下值：
0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount   只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
 
WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：
 
事件     事件处理程序   描述
open     Socket.onopen  连接建立时触发
message  Socket.onmessage   客户端接收服务端数据时触发
error     Socket.onerror  通信发生错误时触发
close     Socket.onclose   连接关闭时触发
 
WebSocket 方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：
 
方法     描述
Socket.send()  使用连接发送数据
Socket.close() 关闭连接
 
WebSocket 实例
WebSocket 协议本质上是一个基于 TCP 的协议。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
客户端的 HTML 和 JavaScript
目前大部分浏览器支持 WebSocket() 接口，你可以在以下浏览器中尝试实例： Chrome, Mozilla, Opera 和 Safari。
websocket.html 文件内容
<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>websocket</title>
      <script type="text/javascript">
         function WebSocketTest(){
            if ("WebSocket" in window){
               alert("您的浏览器支持 WebSocket!");
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
               ws.onopen = function(){
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
               ws.onmessage = function (evt){
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
               ws.onclose = function(){
                  // 关闭 websocket
                  alert("连接已关闭...");
               };
            }else{
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
   </head>
   <body>
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
   </body>
</html>
 希望对你有所帮助，结一段小善缘：小就是不深不浅，善就是天性使然，缘就是聚合离散。

WebSocket浅谈的更多相关文章

  1. 浅谈Websocket、Ajax轮询和长轮询（long polling）

    浅谈Websocket.Ajax轮询和长轮询(long p0ll) 最近看到了一些介绍Websocket的文章,觉得挺有用,所以在这里将自己的对其三者的理解记录一下. 1.什么是Websocket W ...

  2. 【ASP.NET MVC系列】浅谈Google Chrome浏览器（操作篇）（下）

    ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

  3. 浅谈CORS

    浅谈CORS CORS全称"跨站资源共享"(Cross-Origin Resource Sharing),它允许浏览器克服浏览器同源策略向跨域服务器发出请求. 同源策略 概念 说到 ...

  4. 浅谈白鹭Egret

    浅谈白鹭Egret           最近在做一个移动项目,技术选型的时候接触到了白鹭,简单了解了之后觉得挺合适的,最终就选择了这个引擎. 为什么会选择白鹭引擎呢? 我看上他主要有一下几点:   1 ...

  5. Java线上问题排查神器Arthas快速上手与原理浅谈

    前言 当你兴冲冲地开始运行自己的Java项目时,你是否遇到过如下问题: 程序在稳定运行了,可是实现的功能点了没反应. 为了修复Bug而上线的新版本,上线后发现Bug依然在,却想不通哪里有问题? 想到可 ...

  6. 浅谈springboot自动配置原理

    前言 springboot自动配置关键在于@SpringBootApplication注解,启动类之所以作为项目启动的入口,也是因为该注解,下面浅谈下这个注解的作用和实现原理 @SpringBootA ...

  7. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  8. 浅谈 LayoutInflater

    浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...

  9. 浅谈Java的throw与throws

    转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...

随机推荐

  1. 基于MFC的网页ActiveX控件开发全程实录2（js向ActiveX控件传递参数）

    原文转自 https://blog.csdn.net/qianbin3200896/article/details/81452822 1.ActiveX控件部分(JS到ActiveX控件)继续上一篇博 ...

  2. linux 基础指令

    df -h 查看磁盘空间 root@ubuntu:/etc# df -h Filesystem Size Used Avail Use% Mounted on udev 970M 0 970M 0% ...

  3. ef core数据迁移的一点小感悟

    ef core在针对mysql数据迁移的时候,有些时候没法迁移...有两种情况没法迁移,一种是因为efcore的bug问题导致没法迁移,这个在github上有个问题集,另外一种是对数据表进行较大幅度的 ...

  4. MyBatis 常用词汇含义

    JDBC:java Data Base  Connection(Java与数据库连接): ORM:Object Relational Mapping(对象关系映射,简称ORM,或者O/RM,或者O/M ...

  5. 【转载】 C#中使用Count方法获取List集合中符合条件的个数

    很多时候操作List集合的过程中,我们需要根据特定的查询条件,获取List集合中有多少个实体对象符合查询条件,例如一批产品的对象List集合,如果这批产品的不合格数量大于10则重点备注.在C#中可以自 ...

  6. echarts字体适配

    var html = document.getElementsByTagName("html")[0]; var width = html.clientWidth; var too ...

  7. SAP Marketing Cloud功能简述(三) 营销活动内容设计和产品推荐

    Grace的前两篇文章: SAP Marketing Cloud功能简述(一) : Contacts和Profiles SAP Marketing Cloud功能简述(二) : Target Grou ...

  8. vbox 网络配置

    vagrant主机与虚拟机通讯网络有两种模式: config.vm.network "private_network", ip: "192.168.33.10" ...

  9. django(模版)

    官方文档:https://docs.djangoproject.com/en/1.11/ref/templates/language/ 常用语法 Django模板中只需要记两种特殊符号: {{  }} ...

  10. 【转载】Redis 4.0 自动内存碎片整理（Active Defrag）源码分析

    click原文链接原文链接:https://blog.csdn.net/zouhuajianclever/article/details/90669409阅读本文前建议先阅读此篇博客: Redis源码 ...