H5学习系列之webSocket入门

Websocket

1.websocket是什么？

WebSocket是为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接，

此后服务端与客户端通过此TCP连接进行实时通信。

2.websocket的优点

以前我们实现推送技术，用的都是轮询，在特点的时间间隔有浏览器自动发出请求，将服务器的消息主动的拉回来，在这种情况下，我们需要不断的向服务器发送请求，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源。会占用大量的带宽和服务器资源。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。在建立连接之后，服务器可以主动传送数据给客户端。

此外，服务器与客户端之间交换的标头信息很小。

WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；

3.如何使用websocket

客户端

在支持WebSocket的浏览器中，在创建socket之后。可以通过onopen，onmessage，onclose即onerror四个事件实现对socket进行响应

一个简单是示例

var ws = new WebSocket(“ws://localhost:8080”);

ws.onopen = function()

{ console.log(“open”);

ws.send(“hello”);

};

ws.onmessage = function(evt)

{

console.log(evt.data)

};

ws.onclose = function(evt)

{

console.log(“WebSocketClosed!”);

};

ws.onerror = function(evt)

{

console.log(“WebSocketError!”);

};

1.var ws = new WebSocket(“ws://localhost:8080”);

申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。

ws.send(“hello”);
用于叫消息发送到服务端
2.ws.onopen = function() { console.log(“open”)};

当websocket创建成功时，即会触发onopen事件
3.ws.onmessage = function(evt) { console.log(evt.data) };
当客户端收到服务端发来的消息时，会触发onmessage事件，参数evt.data中包含server传输过来的数据
4.ws.onclose = function(evt) { console.log(“WebSocketClosed!”); };

当客户端收到服务端发送的关闭连接的请求时，触发onclose事件
5.ws.onerror = function(evt) { console.log(“WebSocketError!”); };
如果出现连接，处理，接收，发送数据失败的时候就会触发onerror事件
我们可以看出所有的操作都是采用事件的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。

H5学习系列之webSocket入门相关推荐

反射学习系列1-反射入门
反射学习系列目录反射学习系列1-反射入门反射学习系列2-特性(Attribute) 反射学习系列3-反射实例应用作者 Reflection,中文翻译为反射.这是.Net中获取运行时类型信息的方式 ...
Android-音视频学习系列(一)-JNI-从入门到精通，android开发入门
/** 1. 加载 native 库 */ static { System.loadLibrary("native-lib"); } @Override protected voi ...
.net Dapper 学习系列(1) ---Dapper入门
目录写在前面为什么选择Dapper 在项目中安装Dapper 在项目中使用Dapper 在项目中使用Dapper 进行单表增删改数据操作总结写在前面 Dapper 是一款轻量级ORM架构.为解 ...
H5学习系列之Communication API
1 .postMessage API 首先介绍一下什么是iframe? 百度百科里这样写道:IFRAME,HTML标签,作用是文档中的文档,或者浮动的框架(FRAME). 我的理解就是网页中的网页. ...
Linux学习系列之Linux入门（一）linux安装与入门
第一篇:安装并配置Linux开发环境一.安装linux: 主要安装Linux的发行版,到目前为之,主要的发行版有: 比较常用的是Ubuntu.redhat和centOS,主要的安装方法详细: Ubu ...
反射学习系列3-反射实例应用
反射学习系列目录反射学习系列1-反射入门反射学习系列2-特性(Attribute) 反射学习系列3-反射实例应用作者例子这个东西其实挺难弄得,弄个简单的,虽然能说明问题但却容易让人觉得没实用价 ...
超全PHP学习资源整理：入门到进阶系列
PHP是少数几门在语言层面饱受诟病,但在实际开发和应用上却又让人无法撒手的语言之一.就好比路边摊小吃,一遍骂人家不卫生,一遍却又说:真香.所谓接地气,不外如此,大道理不说,PHP光是轮子多.市场占有率 ...
Asp.Net MVC5入门学习系列⑤
Asp.Net MVC5入门学习系列⑤ 原文:Asp.Net MVC5入门学习系列⑤ 检查VS生产的编辑方法和编辑窗体前面我们一步使用强类型,然后创建Controller(控制器)的时候,VS默认已 ...
Asp.Net MVC5入门学习系列⑥
Asp.Net MVC5入门学习系列⑥ 原文:Asp.Net MVC5入门学习系列⑥ 接着上次的篇幅,我们这篇手动来写一个查询的流程代码! 搜索/查询流程功能的实现那现在要做搜索(查询)功能我们第 ...

H5学习系列之webSocket入门

H5学习系列之webSocket入门相关推荐

最新文章

热门文章