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. Charles 修改请求/compose和Compose New

    本文参考:撰写工具/compose和Compose New 撰写工具/compose和Compose New compose 是在原有的请求基础上,修改: 可以写各种状态: – URL: – Meth ...

  2. Linux环境下进行分布式压测踩过的坑

    背景:公司为了满足大并发的情况,需要测试组配合,就需要分布式压测,这里我把我踩过坑都记录下来: 环境:Linux + jmeter-v.5.1.1;使用3台2核4G的压力机: Q1: Server f ...

  3. [Code] 烧脑之算法模型

    把博客的算法过一遍,我的天呐多得很,爱咋咋地! 未来可考虑下博弈算法. 基本的编程陷阱:[c++] 面试题之犄角旮旯 第壹章[有必要添加Python] 基本的算法思想:[Algorithm] 面试题之 ...

  4. C++基础之string类

    string也是属于顺序容器,但是string类很重要且经常使用,因此在这里单独记录. string的操作总结 string(const char *s,int n);  //用c字符串s初始化,s应 ...

  5. 2018年蓝桥杯java b组第四题

    标题:测试次数 x星球的居民脾气不太好,但好在他们生气的时候唯一的异常举动是:摔手机.各大厂商也就纷纷推出各种耐摔型手机.x星球的质监局规定了手机必须经过耐摔测试,并且评定出一个耐摔指数来,之后才允许 ...

  6. C#连接Mongo报Unable to authenticate using sasl protocol mechanism SCRAM-SHA-1错的解决方案

    ---恢复内容开始--- 最近做一个基于ABP的.net Core的项目,数据库选了MongoDB,但是返现无法给数据库设置认证,只要设置了账号密码连接就报错 连接串如下: mongodb://roo ...

  7. 利用Python进行数据分析：【Pandas】（Series+DataFrame）

    一.pandas简单介绍 1.pandas是一个强大的Python数据分析的工具包.2.pandas是基于NumPy构建的.3.pandas的主要功能 --具备对其功能的数据结构DataFrame.S ...

  8. ps查看图层大小快捷键

    1.图层大小尺寸的: ctrl+alt+c 2.图片大小尺寸.像素大小: ctrl+alt+i

  9. Python爬虫（二）：Requests库

    所谓爬虫就是模拟客户端发送网络请求,获取网络响应,并按照一定的规则解析获取的数据并保存的程序.要说 Python 的爬虫必然绕不过 Requests 库. 1 简介 对于 Requests 库,官方文 ...

  10. Cocos Creator 3D 打砖块图文教程(一)

    在线体验链接: http://example.creator-star.cn/block3d/ 上面图中是打砖块游戏的主要 3D 节点元素,Shawn 这两天在学习 Unity 与 Creator3D ...