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. SQL Server元数据查询

    原文:SQL Server元数据查询 1.查询触发器的信息 --查询触发器的信息 select name, --触发器名称 (select name from sys.objects where ob ...

  2. Bootstrap4 入门

    http://www.runoob.com/bootstrap4/bootstrap4-navs.html 共五个部分 1 <!DOCTYPE html> <html lang=&q ...

  3. JavaScript，遍历，for

    (for循环,for...in ,for...of ,forEach)(:for in总是得到数组,字符串的下标,而for of和forEach一样,是直接得到值) (forEach() 方法用于调用 ...

  4. css 设置overflow:scroll 滚动条的样式

    /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1 ...

  5. 记一次靠谱的nvm在window系统的安装

    最近电脑系统重装,电脑的环境配置也清空掉了,今天想写点代码,突然发现什么环境也没了,又要重新配置了. 安装node环境的话,完全可以直接去node的官网下载安装包安装,也不是特别复杂,但是由于之前跑的 ...

  6. Java中关于String类型的一些思考

    作为初学者在学习Java的时候,变量类型是不可避免会遇到的,在以往我们的印象中字符串String都是作为基本类型而存在的,但是在Java中String类型确是一个实实在在的引用类型,是可以通过new关 ...

  7. 记录java+testng运行selenium（四）--- 结构说明

    一图:主要是driver文件所在目录,及ini配置文件所在位置. 这两个文件一般我是放在其它目录下,不跟随项目所在目录 二图:用例操作类及用例执行类所在位置. 下图中有接口代码及功能代码组成,之前的文 ...

  8. 基于fastai的分类网络

    classify.fastai Classifier based on fastai 欢迎访问:https://github.com/pprp/classify.fastai/ 字符识别分类器-基于f ...

  9. PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能

    PHP开启目录引索 一. 前言 不知为何对nginx情有独钟, 最近练习php, 为了方便写代码, 便想要开启nginx的目录索引功能, 显然不如Apache开启的方便, 几次尝试都崩了... 我这个 ...

  10. JAVA HASH学习

    就HASH的目的来说,是为了解决内容摘要与快速索引的问题:而其算法也比较多样. JDK实现中,对String类的hashcode()进行了重载: public int hashCode() { int ...