WebSockets通信

1. websocket是什么？
WebSocket是一种网络通信协议。
2. 为什么需要websocket?
我们有http协议，为什么还需要websocket协议呢？
因为http协议有一个缺陷，通信只能是客户端发起请求的，服务器端返回查询结果。比如说 我想知道一个实时新闻，那么每次新闻更新后，我都要刷新页面
，发起客户端请求，服务器端返回结果。不能做到服务器端推送消息给客户端，当然我们可以使用轮询，看看服务器有么有新的消息，比如 "聊天室" 这样的，但是轮询效率非常低的，因此websocket就这样产生了。

websocket最大的优点是：服务器可以主动向客户端推送消息，客户端也可以主动向服务器端发送消息。
使用websockets可以在服务器与客户端之间建立一个非http的双向链接。这个链接是实时的，也是永久的(除非被关闭)，当服务器想向客户端发送
数据时，可以立即将数据推送到客户端的浏览器中，无需重新建立链接，只要客户端有一个被打开的socket(套接字)并且与服务器建立链接，服务器就可以
把数据推送到这个socket上。

3. 如何使用websocket？
WebSocket接收一个url参数，然后调用WebSocket对象的构造器来建立与服务器之间的通信链接。
如下代码初始化：

var websocket = new WebSocket('wss://echo.websocket.org');

注意：URL字符串必须以 "ws" 或 "wss"（加密通信）开头。

如上代码，通信链接建立好之后，就可以进行客户端与服务器端的双向通信了。可以使用websocket对象的send方法对服务器发送数据，但是只能
发送文本数据(但是我们可以使用JSON对象把任何js对象转换成文本数据后再进行发送)。

3-1 使用send方法的代码如下：

websocket.send("data");

3-2 接收服务器传过来的数据
通过onmessage事件来接收服务器传过来的数据，如下代码：

websocket.onmessage = function(event) {

   var data = event.data;

}

3-3 监听socket的打开事件
通过获取onopen事件来监听socket的打开事件。如下代码：

websocket.onopen = function(event) {

// 开始通信时的处理

}

3-4 监听socket的关闭事件
通过获取onclose事件来监听socket的关闭事件。如下代码：

websocket.onclose = function(event) {

// 通信结束时的处理

}

通过close方法来关闭socket, 如下代码：

websocket.close();

3-5 webSocket.readyState

可以通过读取readyState的属性值来获取WebSocket对象的状态，readyState属性存在以下几种属性值。

CONNECTING(数字值为0)， 表示正在连接。
OPEN(数字值为1)，表示已建立连接。
CLOSING(数字值为2)，表示正在关闭连接。
CLOSED(数字值为3)，表示已关闭链接。

4. 发送消息demo
请看效果演示

如下代码：

var websocket = new WebSocket('wss://echo.websocket.org');

websocket.onopen = function(e) {

  console.log('Connection open ...');

  websocket.send("Hello WebSocket!");

}

websocket.onmessage = function(e) {

  console.log('Received Message: ' + e.data);

  websocket.close();

}

websocket.onclose = function(e) {

  console.log('Connection closed.');

}

4-1 下面再看一个demo，客户端使用websocket技术与服务器端进行连接并且发送信息的demo，代码如下：

var websocket;

function connect() {

  var msg = document.getElementById('message');

  try {

    var readyState = new Array("正在连接", "已建立连接", "正在关闭连接", "已关闭连接");

    var url = "wss://echo.websocket.org";

    websocket = new WebSocket(url);

    msg.innerHTML +="<p>Socket状态为:"+readyState[websocket.readyState]+"</p>";

    websocket.onopen = function() {

      msg.innerHTML += "<p>Socket状态为"+readyState[websocket.readyState]+"</p>"

    }

    websocket.onmessage = function(msg) {

      msg.innerHTML += "<p>接收信息："+msg.data+"</p>";

    }

    websocket.onclose = function() {

      msg.innerHTML += "<p>Socket状态为:"+readyState[websocket.readyState]+"</p>"

    }

  } catch(e) {

    msg.innerHTML += "<p>发生异常了</p>";

  }

}

function send() {

  var text = document.getElementById('text').value;

  var msg = document.getElementById('message');

  if (text == "") {

    msg.innerHTML += "<p>请输入一些文字</p>";

    return;

  }

  try {

    websocket.send(text);

    msg.innerHTML += "<p>发送数据:"+text+"</p>";

  } catch(e) {

    msg.innerHTML += "<p>发送数据异常了</p>";

  }

  document.getElementById('text').value = '';

}

function disconnect() {

  websocket.close();

}

查看demo预览

4-2 发送对象
使用websocket，不仅可以发送文本数据，而且可以使用JSON对象来发送JS中的对象，使用JSON对象的关键是使用它的两个方法，
JSON.parse方法与JSON.stringify方法，JSON.stringify方法把javascript对象转换成文本数据，JSON.parse方法将文本数据转换为Javascript对象。如下代码演示：

<!DOCTYPE html>

<html>

  <head>

    <title>websocket</title>

    <style>

    </style>

  </head>

  <body>

    <script>

      var websocket = new WebSocket('wss://echo.websocket.org');

      websocket.onopen = function(e) {

        console.log('Connection open ...');

        websocket.send(

          JSON.stringify({

            'msg': 'payload'

          })

        );

      }

      websocket.onmessage = function(e) {

        console.log(JSON.parse(e.data));

        websocket.close();

      }

      websocket.onclose = function(e) {

        console.log('Connection closed.');

      }

    </script>

  </body>

</html>

效果查看预览

4-3 发送与接收原始二进制数据
在HTML5中，除了可以使用websocket发送文本数据以及对象之外，还可以使用websocket来发送ArrayBuffer对象与Bolb对象。如下代码：

<!DOCTYPE html>

<html>

  <head>

    <title>websocket</title>

    <style>

    </style>

  </head>

  <body>

    <script>

      var websocket = new WebSocket('wss://echo.websocket.org');

      websocket.onopen = function(e) {

        console.log('Connection open ...');

        // 发送二进制对象

        var buffer = new ArrayBuffer(128);

        websocket.send(buffer);

        var intview = new Uint32Array(buffer);

        websocket.send(intview);

        var blob = new Blob([buffer]);

        websocket.send(blob);

      }

      websocket.onmessage = function(e) {

        console.log(e.data);

        websocket.close();

      }

      websocket.onclose = function(e) {

        console.log('Connection closed.');

      }

    </script>

  </body>

</html>

预览效果

比如上传图片，发送图片二进制数据如下：

<!DOCTYPE html>

<html>

  <head>

    <title>websocket</title>

    <style>

    </style>

  </head>

  <body>

    <input type="file" value="选择图片" id="file" accept="image/*"/>

    <button onclick="upload()">上传图片</button>

    <script>

      var websocket = new WebSocket('wss://echo.websocket.org');

      function upload() {

        var file = document.getElementById('file').files[0];

        console.log(file)

        websocket.send(file);

      }

      websocket.onmessage = function(e) {

        console.log(e.data);

      }

    </script>

  </body>

</html>

预览效果

WebSockets通信的更多相关文章

  1. Nginx担当WebSockets代理

    Nginx担当WebSockets代理 英文原文:http://nginx.com/blog/websocket-nginx/ 作者:chszs,转载需注明. 博客主页:http://blog.csd ...

  2. Apache Tomcat8必备知识（完整的支持WebSockets 1.0）

    一.Apache Tomcat 8介绍 Apache Tomcat 8RC1版于前几日发布.它 经过了2年的开发,引入了很多新特征,由于目前还只是Alpha版,故不推荐在产品中使用.但是我们应该了解它 ...

  3. 使用Nginx做WebSockets代理教程

    WebSocket 协议提供了一种创建支持客户端和服务端实时双向通信Web应用程序的方法.作为HTML5规范的一部分,WebSockets简化了开发Web实时通信程 序的难度.目前主流的浏览器都支持W ...

  4. C# BS消息推送 SignalR介绍（一）

    1. 前言 本文是根据网上前人的总结得出的. 环境: SignalR2.x,VS2015,Win10 介绍 1)SignalR能用来持久客户端与服务端的连接,让我们便于开发一些实时的应用,例如聊天室在 ...

  5. 使用SignalR实现消息提醒

    Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中W ...

  6. [SignalR]SignalR与WCF双工模式结合实现服务端数据直推浏览器端

    原文:[SignalR]SignalR与WCF双工模式结合实现服务端数据直推浏览器端 之前开发基于WinForm监控的软件,服务端基于Wcf实现,里面涉及双工模式,在客户端里面,采用心跳包机制保持与服 ...

  7. [Asp.net 开发系列之SignalR篇]专题一：Asp.net SignalR快速入门

    一.前言 之前半年时间感觉自己有点浮躁,导致停顿了半年多的时间没有更新博客,今天重新开始记录博文,希望自己可以找回初心,继续沉淀.由于最近做的项目中用到SignalR技术,所以打算总结下Asp.net ...

  8. MVC中使用SignaIR入门教程

    一.前言:每次写总要说一点最近的感想 进入工作快半年了,昨天是最郁闷的一天,我怀疑我是不是得了"星期一综合征",每个星期一很没有状态.全身都有点酸痛,这个可能一个星期只有周末才打一 ...

  9. SignalR 实现web浏览器客户端与服务端的推送功能

    SignalR 是一个集成的客户端与服务器库,基于浏览器的客户端和基于 ASP.NET 的服务器组件可以借助它来进行双向多步对话. 换句话说,该对话可不受限制地进行单个无状态请求/响应数据交换:它将继 ...

随机推荐

  1. Java集合框架——jdk 1.8 ArrayList 源码解析

    前言:作为菜鸟,需要经常回头巩固一下基础知识,今天看看 jdk 1.8 的源码,这里记录 ArrayList 的实现. 一.简介 ArrayList 是有序的集合: 底层采用数组实现对数据的增删查改: ...

  2. Vue 系列之 渲染与事件处理

    渲染相关 列表渲染 与 条件渲染 Vue 中的常见的渲染有 列表渲染 和 条件渲染 所谓条件渲染,则是通过添加一定的逻辑条件来进行 Dom 元素的操作 v-if v-else v-else-if &l ...

  3. Python 练习: 简单角色游戏程序

    要求: 1.创建三个游戏人物,分别是: 苍井井,女,18,初始战斗力1000 东尼木木,男,20,初始战斗力1800 波多多,女,19,初始战斗力2500 2.游戏场景,分别: 草丛战斗,消耗200战 ...

  4. 我的Java之旅 第七课 JAVA WEB 会话管理

    1.隐藏域       隐藏域其实不是Servlet/JSP的会话管理机制的内容,但它能实现简单的页面状态记录的效果. 2.Cookie    Cookie类    setMaxAge() 设置有效期 ...

  5. ArcGIS Server Rest 认证过程分析

    1. http://192.168.1.220:6080/arcgis/admin/login?redirect= Request URL: http://192.168.1.220:6080/arc ...

  6. DB、ETL、DW、OLAP、DM、BI关系 ZT

    在此大概用口水话简单叙述一下他们几个概念: (1)DB/Database/数据库——这里一般指的就是OLTP数据库,在线事物数据库,用来支持生产的,比如超市的买卖系统.DB保留的是数据信息的最新状态, ...

  7. 喜闻乐见-Android应用的生命周期

    本文主要讲述了App的启动流程.Application的生命周期以及进程的回收机制. 在绝大多数情况下,每一个Android应用都在自己的Linux进程中运行.当需要运行某些代码时,进程就会被创建.进 ...

  8. 三. Redis 主从复制

    特点 1. Master可以拥有多个Slave 2. 多个Slave除可以连接一个Master外,还可以连接多个Salve(避免Master挂掉不能同步,当Master挂掉,其中一个Slave会立即变 ...

  9. Core Animation-2:寄宿图

    #寄宿图 >图片胜过千言万语,界面抵得上千图片  ——Ben Shneiderman 我们在第一章『图层树』中介绍了CALayer类并创建了一个简单的有蓝色背景的图层.背景颜色还好啦,但是如果它 ...

  10. [Android] 获取系统顶部状态栏(Status Bar)与底部导航栏(Navigation Bar)的高度

    Android一些设备都有上下两条bar,我们可以获取这些bar的信息.下面放上获取高度的代码.代码注释和其他方法有空再放. 原文地址请保留http://www.cnblogs.com/rossone ...