WebSocket学习简书
1、什么是Websocket？
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
2、单工,半双工和全双工通信？
- 在单工通信中，通信的信道是单向的，发送端与接收端也是固定的，即发送端只能发送信息，不能接收信息；接收端只能接收信息，不能发送信息。
- 半双工通信可以实现双向的通信，但不能在两个方向上同时进行，必须轮流交替地进行。
- 全双工通信是指在通信的任意时刻，线路上存在A到B和B到A的双向信号传输。
3、为什么要使用Websocket?
- websock使得客户端与服务器的数据传输更加简单，允许服务器主动向客户端推送数据。
- 浏览器与服务器只需要完成一次握手就可以创立持久的链接，并进行双向数据传输。
- 传统网站实现推送，都是使用ajax轮循（间隔一定时间向服务器发起请求）会浪费大量服务器资源与带宽。
- 使用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 表示连接状态，可以是以下值：
|
| 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学习简书的更多相关文章
- 抽空通过简书网学习了一下console，感觉高大上！
抽空看了一下简书中关于console的文章,为了便于自己今后查看,自己写了一遍!原文地址:http://www.jianshu.com/p/f961e1a03a56 测试代码在最下面 1.consol ...
- [开源,学习,分享]UWP第三方简书客户端分享
简介 Windows10正式版发布到现在,我利用零零碎碎的一些时间对UWP进行一些学习,也基于这门技术开发了一个第三方的简书App. 基本界面 优酷视频: http://v.youku.com/v_s ...
- AI时代学习新的技术，方向为计算机视觉--欢迎来我的简书blog拔草
2017-09-01 19:29:33 简书blog: https://www.jianshu.com/u/973c8c406de7
- iOS离屏渲染简书
更详细地址https://zsisme.gitbooks.io/ios-/content/chapter15/offscreen-rendering.html(包含了核心动画) GPU渲染机制: CP ...
- 从刚刚「简书」平台的短暂异常，谈Nginx An error occurred报错～
09.26简书平台的短暂异常 An error occurred. Sorry, the page you are looking for is currently unavailable. Plea ...
- iOS开发--Bison详解连连支付集成简书
"最近由于公司项目需要集成连连支付,文档写的不是很清楚,遇到了一些坑,因此记录一下,希望能帮到有需要的人." 前面简单的集成没有遇到什么坑,在此整理一下官方的集成文档,具体步骤如下 ...
- 简书markdown教程
1 支持 Markdown 的编辑器 Windows 推荐 Sublime Text 3,强大优雅的编辑器.MarkdownPad,一款可以直接预览排版效果的编辑器. Mac 推荐 Ulysess,专 ...
- Scrapy爬取Ajax（异步加载）网页实例——简书付费连载
这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...
- 把cnblogs变成简书 - cnblogs博客自定义皮肤css样式
吐槽 博客园cnblogs作为老牌的IT技术博客类网站,为广大的开发者提供了非常不错的学习交流平台. 虽然博客内容才是重点,但是如果有赏心悦目的页面不更好吗! cnblogs可以更换博客模板,并且提供 ...
随机推荐
- Java第二次作业第一题
编写图形界面程序,在窗体中设置菜单栏,在菜单栏上添加"file"菜单,在文件菜单中添加"new"和"quit"两个菜单项,其中"q ...
- js中Math对象常用的属性和方法
1 Math对象 1.1定义:Math是js的一个内置对象,它提供了一些数学方法. 1.2特性:不能用构造函数的方式创建,无法初始化,只有静态属性和方法 1.3静态属性 1.3.1 Math.PI 圆 ...
- 自己制作一个简单的操作系统二[CherryOS]
自己制作一个简单的操作系统二[CherryOS] 我的上一篇博客 自己制作一个简单的操作系统一[环境搭建], 详细介绍了制作所需的前期准备工作 一. 一点说明 这个操作系统只是第一步, 仅仅是开机显示 ...
- Java异常详谈
什么是异常: 异常(Exception)是程序运行过程中发生的事件,该事件可以中断程序指令的正常执行流程. 注意: 如果实际抛出的异常对象属于Exception的子类对象,而继承自Throwable类 ...
- SpringBoot集成Shiro 实现动态加载权限
一.前言 本文小编将基于 SpringBoot 集成 Shiro 实现动态uri权限,由前端vue在页面配置uri,Java后端动态刷新权限,不用重启项目,以及在页面分配给用户 角色 . 按钮 .ur ...
- 【Django】url(路由系统)
1.单一路由对应 url(r'^index/',views.index), 2.基于正则的路由 url(r'^index/(\d*)', views.index), url(r'^manage/(?P ...
- SD-WAN 配置及应用模板**（二）
目录 0. 前言 1. 配置模板 1.1 创建各类 'Feature' 模板: 1.1.1 添加波特率模板 1.1.2 添加 'VPN0' 模板 1.1.3 添加 'VPN10' 模板 1.1.4 添 ...
- 事件--JavaScript
事件概述 JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为. 简单理解: 触发--- 响应机制. 网页中的每个元素都可以产生某些可以触发 JavaSc ...
- java递归求八皇后问题解法
八皇后问题 八皇后问题,是一个古老而著名的问题,是回溯算法的典型案例.该问题是国际西洋棋棋手马克斯·贝瑟尔于1848年提出:在8×8格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处 ...
- C++——指针
目录 一.地址和指针 1.1内存 1.2针和指针变量 二.指针变量 2.1始化 2.2赋值 2.3指针类型算术运算 2.4指针类型关系运算 2.5指向指针的指针 三.指针与数组 3.1指针运算 3.2 ...