websocket

什么是websocket?
websocket是一种网络协议,是在HTTP基础上做了一些优化的协议,与HTTP无直接关系。

HTTP协议
HTTP(超文本传输协议):规定了web浏览器如何从web服务器获取文档和想web服务器提交表单内容,以及web服务器如何响应这些请求和提交返回给浏览器。
HTTP的第一个版本叫做HTTP/0.9,是一种为互联网原数据传输服务的简单协议。由RFC 1945[6]定义的HTTP/1.0进一步完善了这个协议。它允许消息以类MIME消息的格式传送,它包括传输数据的元信息和对请求/响应语义的修饰。HTTP/1.0没有充分考虑到分层代理,缓存的,以及持久链接和虚拟主机的需求得影响。
HTTP/1.1,版本对1.0版本做了优化,开始支持长连接和缓存。

为什么需要webSocket?
因为HTTP协议有一个缺陷:通信只能由客户端发起,服务器不能实时发送最新数据给客户端。要是我偏要最新的数据怎么办?可以用Ajax轮训,Ajax轮训就是一个定时器,每隔多少时间让它请求一下服务器端。这个webSocket可以实现服务器端主动给客户端实时更新数据。
比如说;查询天气,现在天气如何?客户端请求服务端,服务端反馈:现在天气晴,过一会天气变了,用户还有请求一次才能看到天气的变化,而不是服务端实时更新反馈数据,体验能更好。
image.png
HTTP与WebSocket链接方式对比(最大的区别)

image.png
webSocket请求报文

image.png

webSocket响应报文
image.png

报文头字段含义

  • Connection 必须设置 Upgrade,表示客户端希望连接升级。
  • Upgrade 字段必须设置 Websocket,表示希望升级到 Websocket 协议。
  • Sec-WebSocket-Key 是随机的字符串,服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”,然后计算 SHA-1 摘要,之后进行 BASE-64 编码,将结果做为 “Sec-WebSocket-Accept” 头的值,返回给客户端。如此操作,可以尽量避免普通 HTTP 请求被误认为 Websocket 协议。
  • Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13,之前草案的版本均应当弃用。
  • Sec-WebSocket-Protocal是一个用户定义的字符串,用来区分同URL下,不同的服务所需要的协议。
  • Origin 字段是可选的,通常用来表示在浏览器中发起此 Websocket 连接所在的页面,类似于 Referer。但是,与 Referer 不同的是,Origin 只包含了协议和主机名称。

    其他一些定义在 HTTP 协议中的字段,如 Cookie 等,也可以在 Websocket 中使用。

webSocket的特点
(1)建立在 TCP 协议之上,服务器端的实现比较容易。
(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
(3)数据格式比较轻量,性能开销小,通信高效。
(4)可以发送文本,也可以发送二进制数据。
(5)没有同源限制,客户端可以与任意服务器通信。
(6)协议标识符为ws(如果加密为wss)服务器网址就是url
(7)不受同源策略的限制

webSocket的使用

创建webSocket

var Socket = new WebSocket(url);

Websocket方法:
1、Socket.send()
send(data) 方法使用连接传输数据。

2、Socket.close()
close() 方法用于终止任何现有连接

<script>
     //创建webSocket
     var socket = new WebSocket('ws://echo.websocket.org/');
     socket.onopen = function(){
         //发送数据
         socket.send('hello world');
    }
     socket.onmessage = function(e){
         console.log(e.data);
         socket.close();//终止链接,下面的 你好,世界传不了了
         socket.send('你好!世界')           
    }
 </script>

websocket属性
image.png

 <script>
        var socket = new WebSocket('ws://echo.websocket.org/');
        console.log('before---',socket.readyState);//表示尚未连接
        socket.onopen = function(){
            console.log('打开连接',socket.readyState);//已连接
            socket.send('你好,服务端');
        }
        socket.onmessage = function(e){
            //下面可以e.data接收消息
            console.log('message接收服务端信息' + e.data,socket.readyState);//已连接
            socket.close();
            console.log('closeing连接正在关闭中',socket.readyState);//正在进行关闭  
        }
        socket.onclose = function(){
            console.log('close连接已经关闭',socket.readyState);//连接已经关闭
        }
    </script>

执行结果如下:
image.png

websocket事件

onopen
onopen属性用来指定连接成功之后的回调函数,看上面代码,我们在连接成功之后打印一个连接成功,并且调用send方法。这里如果要是指定多个回调函数,需要使用addEventListener方法。

onclose
和onopen一样的使用,用来指定关闭连接的回调。
onmessage
指定接收到服务器数据后的回调,可以在回调中通过参数.data获取到返回的数据。
onerror
指定发生错误时的回调
send
用来发送数据,不仅仅是普通字符串文本,也可以是其他类型的数据(比如ArrayBuffer )。
bufferedAmount
可以获取当前还有多少数据没有发出去,用来判断是否发送结束。

if(socket.bufferedAmount === 0){
    console.log("发送完毕");
}else{
    console.log("还有", socket.bufferedAmount, "数据没有发送");
}

注:WebSocket.org 提供了一个专门用来测试WebSocket的服务器"ws://echo.websocket.org"

Websocket优点

  1. 客户端与服务器都可以主动传送数据给对方;
  2. 不用频率创建TCP请求及销毁请求,减少网络带宽资源的占用,同时也节省服务器资源;

官网http://websocketd.com/

Image placeholder
空白
未设置
  55人点赞

没有讨论,发表一下自己的看法吧

推荐文章
GoWeb教程_08.2. WebSocket

WebSocket是HTML5的重要特性,它实现了基于浏览器的远程socket,它使浏览器和服务器可以进行全双工通信,许多浏览器(Firefox、GoogleChrome和Safari)都已对此做了支

老司机带你用 PHP 实现 Websocket 协议

我为什么会写这篇文章? 当初作为编程小白的我,刚刚从事后台工作,觉得http是个很牛逼的东西,然而后面随着自己深入学习并实践之后,觉得原来和我所想的天壤之别,没大家想象的那么复杂,仅仅是个协议嘛!。后

基于 Hyperf 实现 RabbitMQ + WebSocket 消息推送

#介绍 基于Hyperf+WebSocket+RabbitMQ实现的一个简单大屏幕的消息推送。 #思路 利用WebSocket协议让客户端和服务器端保持有状态的长链接,保存链接上来的客户端id。订阅发

GoWeb教程_08.1. Socket 编程

在很多底层网络应用开发者的眼里一切编程都是Socket,话虽然有点夸张,但却也几乎如此了,现在的网络编程几乎都是用Socket来编程。你想过这些情景么?我们每天打开浏览器浏览网页时,浏览器进程怎么和W

自己撸一个 LaraDock(使用 Docker LNMP 部署 PHP 开发环境)

项目简介 DockerLNMP是基于docker-compose开发的运行在Docker上的LNMP开发环境,包含PHP、MySQL、Redis等镜像并支持多版本切换,满足您的学习、开发和测试需求。

PHP 编写基本的 Socket 程序

告诫年轻人 空想是没有用的,个人的能力来源于每一天的努力,而不是一步登天,不要畏惧任何新的知识,水滴石穿,总有一天会柳暗花明。 我的目的 因为在以后的学习中,我可能会用到网络方面的内容,但同时很多写P

深入浅出 JSON Web Token

JSONWebToken原理 Web应用可分为客户端和服务端,这两者之间经常需要进行身份认证。 由于HTTP是无状态协议,不能保存认证后的用户状态,因此,每一次发送请求都需要重复的进行认证。 为了

API 系列 - 深入浅出 JSON Web Token

原理Web应用可分为客户端和服务端,这两者之间经常需要进行身份认证。由于HTTP是无状态协议,不能保存认证后的用户状态,因此,每一次发送请求都需要重复的进行认证。为了解决该问题,通常会使用Cookie

GoWeb教程_08.0. Web 服务

Web服务可以让你在HTTP协议的基础上通过XML或者JSON来交换信息。如果你想知道上海的天气预报、中国石油的股价或者淘宝商家的一个商品信息,你可以编写一段简短的代码,通过抓取这些信息然后通过标准的

GoWeb教程_13.0. 如何设计一个 Web 框架

前面十二章介绍了如何通过Go来开发Web应用,介绍了很多基础知识、开发工具和开发技巧,那么我们这一章通过这些知识来实现一个简易的Web框架。通过Go语言来实现一个完整的框架设计,这框架中主要内容有第一

GoWeb教程_14.0. 扩展 Web 框架

第十三章介绍了如何开发一个Web框架,通过介绍MVC、路由、日志处理、配置处理完成了一个基本的框架系统,但是一个好的框架需要一些方便的辅助工具来快速的开发Web,那么我们这一章将就如何提供一些快速开发

react-native中IOS的webview和js层通信 - UIWebview

前言在9012的最后一篇写到了在rn中安卓的webview的通信原理,而作为0202年的第一篇,继续讨论上年rn中webview通信剩下的部分。背景:对于webview,了解过的人都知道在ios端会存

maatwebsite/Excel 3.1 使用教程 (导入篇)

maatwebsite/excel使用教程(导入篇) 官方文档 https://docs.laravel-excel.com/3.1/getting... GIT地址 https://github.c

PHP 安全之 webshell 分析

简介webshell就是以asp、php、jsp或者cgi等网页文件形式存在的一种命令执行环境,也可以将其称做为一种网页后门。黑客在入侵了一个网站后,通常会将asp或php后门文件与网站服务器WEB目

你应该知道的RocketMQ

1.概述在很久之前写过一篇Kafka相关的文章,你需要知道的Kafka,那个时候在业务上更多的是使用的是Kafka,而现在换了公司之后,更多的使用的是Rocketmq,本篇文章会尽力全面的介绍Rock

深入探究 RocketMQ 事务机制的实现流程,为什么它能做到发送消息零丢失?

1、解决消息丢失的第一个问题:订单系统推送消息领丢失既然我们已经明确了消息在基于MQ传输的过程中可能丢失的几个地方,那么我们接着就得一步一步考虑如何去解决各个环节丢失消息的问题,首先要解决的第一个问题

GoWeb教程_07.2. JSON 处理

JSON(JavascriptObjectNotation)是一种轻量级的数据交换语言,以文字为基础,具有自我描述性且易于让人阅读。尽管JSON是Javascript的一个子集,但JSON是独立于语言

webpack中css的url报错?

webpack中css的url报错?css-loader://打包样式中背景图 { test:/\.(png|jpg)$/, loader:"url-loader?limit=8192&name=im

基于Webpack的css sprites实现方案

一、前言关于csssprites(雪碧图/精灵图)的几种实现方案可以参考浅谈CSSSprites雪碧图应用。本文主要讨论基于webpack的csssprites实现方案。由于使用webpack时会涉及

Stylus系列——webpack-spritesmith配合stylus使用示例

一、前言基于Webpack的CSSSprites实现方案,若是直接在html中调用雪碧图图标已经很方便,但是实际开发过程可能遇到需要在伪元素中使用雪碧图,或者需要hover切换另一个图标,这种情况下就

react中的webpack是什么?

Webpack是一个开源的前端打包工具。Webpack提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。Webpack可以从终端、或是更改webpack.config

使用html-webpack-plugin对HTML文件进行预处理

一、前言先整理一波之前和webpack相关的文章: 使用Webpack对CSS文件进行后处理 基于Webpack的CSSSprites实现方案 Stylus系列——webpack-spritesmit

Docker 麻烦大了

Docker是容器技术的典范,但其近况似乎不佳。 在早前泄露的一份备忘录中,DockerCEO罗博·比尔登(RobBearden)赞扬了公司的员工,但话术却非常地耐人寻味: 尽管“不确定性带来了巨大

15 个 Docker 初学者必须掌握的命令

这篇文章我基本上不会做put操作。如果你认为这些命令缺少了什么其他方面重要的东西,那么你需要自行检查Docker文档(https://docs.docker.com/) pull pull命令和gi

docker 安装 Laravel 环境 (nginx mariadb PHP7.3)

1,安装mariadb创建网路dockernetworkcreate--subnet=172.18.0.0/16mynetworkdockerrun-d-p3306:3306-eMYSQL_ROOT_