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. dfs的剪枝优化

    两个剪枝问题 1. 当两点的距离(需要走的步数)大于剩下的时间时 剪去 2.奇偶剪枝问题 如果起点到终点所需走的步数的奇偶性与时间奇偶性不同的时候 剪去 起点到终点步数的奇偶性的判断 首先 明确点的奇 ...

  2. windows下批处理保留指定日期下的文件

    @echo offchcp 65001setlocal enabledelayedexpansion ::设置操作路径set "pic_dir=D:\465"echo 开始清理.. ...

  3. Matplotlib pyplot中title() xlabel() ylabel()无法显示中文（即显示方框乱码）的解决办法

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/11020246.html 一.无法正常显示原因 ...

  4. Vue指令之`v-if`和`v-show`

    一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好. <body> < ...

  5. 十三、细说NULL导致的神坑，让人防不胜防

    当数据的值为NULL的时候,可能出现各种意想不到的效果,让人防不胜防,我们来看看NULL导致的各种神坑,如何避免? 一.比较运算符中使用NULL 任何值和NULL使用运算符(>.<.> ...

  6. SHA256WithRSA

    在上文中了解到SHA和RSA,工作中恰好用到扩展应用:SHA256WithRSA,本文总结下学习过程,备忘の 再提供另外一种方法,实现Java版pem密钥和.Net版xml密钥相互转换的方法 密钥转换 ...

  7. RestFramework之序列化组件

    一.restframework的序列化组件的使用 1.导入序列化组件与模型类 from rest_framework import serializers from app01.models impo ...

  8. Gitlab CI/CD任务一直处于pending

    在注册Runner时候这里输入了tag,这里指的是runner的标签,可以设置多个  ,分别用 ,号分割 .gitlab-ci.yml文件中 stages: - pull - package - bu ...

  9. C++——重载原理分析

    C不支持函数重载,C++支持 代码演示 main.c #include<stdio.h> void Max(int a, int b) { printf("%d ", ...

  10. [ansible-playbook]4 持续集成环境之分布式部署利器 ansible playbook学习

    3 ansible-play讲的中太少了,今天稍微深入学习一点 预计阅读时间:15分钟 一: 安装部署 参考 http://getansible.com/begin/an_zhuang_ansile ...