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 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

  1. 实例：
  2.  
  3. <!DOCTYPE HTML>
  4. <html>
  5.    <head>
  6.    <meta charset="utf-8">
  7.    <title>菜鸟教程(runoob.com)</title>
  8.       <script type="text/javascript">
  9.          function WebSocketTest()
  10.          {
  11.             if ("WebSocket" in window)
  12.             {
  13.                alert("您的浏览器支持 WebSocket!");
  14.  
  15.                // 打开一个 web socket
  16.                var ws = new WebSocket("ws://localhost:9998/echo");
  17.  
  18.                ws.onopen = function()
  19.                {
  20.                   // Web Socket 已连接上，使用 send() 方法发送数据
  21.                   ws.send("发送数据");
  22.                   alert("数据发送中...");
  23.                };
  24.  
  25.                ws.onmessage = function (evt)
  26.                {
  27.                   var received_msg = evt.data;
  28.                   alert("数据已接收...");
  29.                };
  30.  
  31.                ws.onclose = function()
  32.                {
  33.                   // 关闭 websocket
  34.                   alert("连接已关闭...");
  35.                };
  36.             }
  37.  
  38.             else
  39.             {
  40.                // 浏览器不支持 WebSocket
  41.                alert("您的浏览器不支持 WebSocket!");
  42.             }
  43.          }
  44.       </script>
  45.  
  46.    </head>
  47.    <body>
  48.       <div id="sse">
  49.          <a href="javascript:WebSocketTest()">运行 WebSocket</a>
  50.       </div>
  51.    </body>
  52. </html>

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

  1. // 创建一个 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. Servlet重定向

    重定向就是在访问一个Servlet时,没有得到资源,只能去找另外一个Servlet去获取资源.状态码为302. import javax.servlet.ServletException; impor ...

  2. Day 8 面试题

    一.选择题(每题2分) #####1.1 设超级用户root当前所在目录为:/usr/local,键入cd命令后, 用户当前所在目录为(B) A:/home B:/root C:/home/root ...

  3. 【linux】【jenkins】自动化运维六 构建生成备份

    push tag用于提交代码构建成功后push tag,以防提交代码报错,方便回滚之前正常的代码. 由于采用docker部署的形式,构建失败自动回滚还未实现,待研究解决. 构建后操作选择 Git Pu ...

  4. redis实现网关限流(限制API调用次数1000次/分)

    添加maven依赖,使用springboot2.x版本 <dependency> <groupId>org.springframework.boot</groupId&g ...

  5. jenkins自动化部署项目9 --定时构建

    举几个例子:每隔5分钟构建一次H/5 * * * * 每两小时构建一次H H/2 * * * 每天中午12点定时构建一次H 12 * * * 每天下午18点定时构建一次H 18 * * * 在每个小时 ...

  6. Ubuntu server16.04安装配置驱动418.87、cuda10.1、cudnn7.6.4.38、anaconda、pytorch超详细解决

    目录 安装GCC 安装NVIDIA驱动 1. 卸载原有驱动(没装跳过) 2. 禁用nouveau 3. 安装NVIDIA显卡驱动 安装CUDA10.1 安装cudnn 安装anaconda 安装ten ...

  7. spring后台重定向方式

    1.直接返回值中加重定向:"redirect:要访问的网址"; public String updateOrAddProject() { return "redirect ...

  8. Git tag相关命令

    常见命令如下: // 查看标签,可加上参数-l(列表形式列出) -n(附加说明) git tag [-l -n] // 查看符合检索条件的标签 git tag -l .*.* // 查看对应标签状态 ...

  9. 在创建activiti5..22所需的25张表时 ，所用的方法和遇到的问题。

    最近在学习关于activiti流程设计的相关内容,首先第一步就需要了解25张activiti相关的表,具体的每张表的含义 请自行百度. 这里讲一下 用java代码生成所需要的25张表,很简单: pub ...

  10. Error running 'tomcat:run' Cannot run program..CreateProcess error=2,系统找不到指定的文件

    Error running 'tomcat:run': Cannot run program "tomcat:run" (in directory "D:\WorkTes ...