1、什么是Websocket？

　　WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

2、单工,半双工和全双工通信？

  • 在单工通信中，通信的信道是单向的，发送端与接收端也是固定的，即发送端只能发送信息，不能接收信息；接收端只能接收信息，不能发送信息。
  • 半双工通信可以实现双向的通信，但不能在两个方向上同时进行，必须轮流交替地进行。
  • 全双工通信是指在通信的任意时刻，线路上存在A到B和B到A的双向信号传输。

　　　　

3、为什么要使用Websocket?

  1. websock使得客户端与服务器的数据传输更加简单，允许服务器主动向客户端推送数据。
  2. 浏览器与服务器只需要完成一次握手就可以创立持久的链接，并进行双向数据传输。
  3. 传统网站实现推送，都是使用ajax轮循（间隔一定时间向服务器发起请求）会浪费大量服务器资源与带宽。
  4. 使用websocket则能够节省服务器资源和带宽。

　　

4、Webcocket 使用？

　　WebSocket 协议本质上是一个基于 TCP 的协议。

　　为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

实例：

<!DOCTYPE HTML>

<html>

   <head>

   <meta charset="utf-8">

   <title>菜鸟教程(runoob.com)</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>

5、Websocket 的属性，方法及处理事件：

// 创建一个 Websocket 对象
const Socket = new WebSocket(url, [protocol] );

Websocket属性：

Socket.readyState   只读属性 readyState 表示连接状态，可以是以下值：

  • 0 - 表示连接尚未建立。

  • 1 - 表示连接已建立，可以进行通信。

  • 2 - 表示连接正在进行关闭。

  • 3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount   只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

Websocket 方法：

Socket.send() 使用连接发送数据
Socket.close() 关闭连接

Websocket 处理事件：

Socket.onopen 连接建立时触发
Socket.onmessage 客户端接收服务端数据时触发
Socket.onerror 通信发生错误时触发
Socket.onclose 连接关闭时触发

说明： 执行websocket程序，我们需要创建一个支持 WebSocket 的服务，请参照：https://www.runoob.com/html/html5-websocket.html

参考网站：https://www.runoob.com/html/html5-websocket.html

WebSocket学习简书的更多相关文章

  1. 抽空通过简书网学习了一下console，感觉高大上！

    抽空看了一下简书中关于console的文章,为了便于自己今后查看,自己写了一遍!原文地址:http://www.jianshu.com/p/f961e1a03a56 测试代码在最下面 1.consol ...

  2. [开源,学习,分享]UWP第三方简书客户端分享

    简介 Windows10正式版发布到现在,我利用零零碎碎的一些时间对UWP进行一些学习,也基于这门技术开发了一个第三方的简书App. 基本界面 优酷视频: http://v.youku.com/v_s ...

  3. AI时代学习新的技术，方向为计算机视觉--欢迎来我的简书blog拔草

    2017-09-01 19:29:33 简书blog: https://www.jianshu.com/u/973c8c406de7

  4. iOS离屏渲染简书

    更详细地址https://zsisme.gitbooks.io/ios-/content/chapter15/offscreen-rendering.html(包含了核心动画) GPU渲染机制: CP ...

  5. 从刚刚「简书」平台的短暂异常，谈Nginx An error occurred报错～

    09.26简书平台的短暂异常 An error occurred. Sorry, the page you are looking for is currently unavailable. Plea ...

  6. iOS开发--Bison详解连连支付集成简书

    "最近由于公司项目需要集成连连支付,文档写的不是很清楚,遇到了一些坑,因此记录一下,希望能帮到有需要的人." 前面简单的集成没有遇到什么坑,在此整理一下官方的集成文档,具体步骤如下 ...

  7. 简书markdown教程

    1 支持 Markdown 的编辑器 Windows 推荐 Sublime Text 3,强大优雅的编辑器.MarkdownPad,一款可以直接预览排版效果的编辑器. Mac 推荐 Ulysess,专 ...

  8. Scrapy爬取Ajax（异步加载）网页实例——简书付费连载

    这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...

  9. 把cnblogs变成简书 - cnblogs博客自定义皮肤css样式

    吐槽 博客园cnblogs作为老牌的IT技术博客类网站,为广大的开发者提供了非常不错的学习交流平台. 虽然博客内容才是重点,但是如果有赏心悦目的页面不更好吗! cnblogs可以更换博客模板,并且提供 ...

随机推荐

  1. Flink 从 0 到 1 学习 —— 如何自定义 Data Sink ？

    前言 前篇文章 <从0到1学习Flink>-- Data Sink 介绍 介绍了 Flink Data Sink,也介绍了 Flink 自带的 Sink,那么如何自定义自己的 Sink 呢 ...

  2. Python Api接口自动化测试框架 excel篇

    工作原理: 测试用例在excel上编辑,使用第三方库xlrd,读取表格sheet和内容,sheetName对应模块名,Jenkins集成服务发现服务moduleName查找对应表单,运用第三方库req ...

  3. Day20 磁盘管理2之RAID卡

    1.磁盘的基本分区Gdisk 前面我们已经了解到fdisk分区,但fdisk不支持给高于2TB的磁盘进行分区.如果有单块盘高于2TB,建议使用Gdisk进行分区. 1.使用gdisk进行磁盘分区 1. ...

  4. C++基础之迭代器

    迭代器的分类 插入迭代器(insert iterator):绑定一个容器上后可以向容器中插入元素: 流迭代器(stream iterator):绑定在输入输出流中,可以遍历关联的流: 反向迭代器(re ...

  5. JavaScript之深入函数（二）

    上一篇我们主要讲解了函数的执行过程和原理,本篇我们将介绍函数的另外两个特殊表现:闭包和立即执行函数. 一 闭包 1,  闭包的形成 之前我们提到,函数执行完毕,马上就会销毁自己的AO对象.但是如果遇到 ...

  6. .netCore+Vue 搭建的简捷开发框架 （4）--NetCore 基础

    书接上文:上一节中,我们已经实现Services 层.(https://www.cnblogs.com/xuzhencheng/p/11424751.html) 但是具体要如何将服务依赖注入进来呢?继 ...

  7. java selenium 自动化笔记-不是0基础，至少有java基础

    本来今天要学GitHub的,但是在群里问了下小伙伴时被暴击.说我学的东西太多太杂,不是很深入,都是皮毛.哎~自己早深有意识到,因个人能力吧,找的资料都不是很全,加上实际工作没有应用到.所以写一篇sel ...

  8. 朱晔和你聊Spring系列S1E11：小测Spring Cloud Kubernetes @ 阿里云K8S

    有关Spring Cloud Kubernates(以下简称SCK)详见https://github.com/spring-cloud/spring-cloud-kubernetes,在本文中我们主要 ...

  9. Angular Cli 升级到最新版本

    1. 卸载当前版本 npm uninstall -g angular-cli 2. 清除未卸载干净的angular-cli缓存 npm cache clean -f 3. 到安装目录查看是否卸载干净 ...

  10. 【HIVE】各种时间格式处理

    yyyy-MM-dd与yyyyMMdd000000转换的三种方法 方法一:date_format(只支持yyyy-MM-dd -> yyyyMMdd000000) select date_for ...