WebSocket

概念

　　WebSocket是再单个TCP连接上进行双工通讯的协议，仅需要通过一次握手两个之间就可以创建持久性的连接，进行双向数据传输。WebSocket 是HTML5新增加的协议。

为什么要用

　　众所周知传统的http协议是客户端（浏览器）发送请求，浏览器响应请求的方式，一条请求对应一条响应。若浏览器不主动请求则服务端无法想客户端主动推数据。传统的方式是使用AJAX轮询（这个方式有它的问题）来解决这一问题后面展开讲。

应用场景

列举几个应用场景：

  • 网络聊天室

  • 多人在线游戏

  • 网站向页面实时推送广告、消息

  • 在线实现对控制设备的控制

前面三个应用场景已经有很多大佬讲过了，我就不讲了，这里主要简单分析一下第四个应用场景。

场景4：

家里装有“XX”牌网络摄像机，我现在工作想看看自家“二哈”有没有在拆家,打开改公司提供的app查看家里的情况，很不巧相机现在没有开机，不过可以通过app控制相机开机，点击开机按钮相机开机。但是相机开机需要一段时间。这时传统的做法是通过AJAX轮询的方式每个1秒左右就向服务器发送请求询问设备是否准备就绪。

客户端> 开机没啊，能不能播放视频了呀。

服务端> 还没呢，别着急等会儿再来。

客户端> 开机没啊，能不能播放视频了呀。

服务端> 还没呢，别着急等会儿再来。

客户端> 开机没啊，能不能播放视频了呀。

服务端> 还没呢，别着急等会儿再来。

......

N次之后

......

客户端> 开机没啊，能不能播放视频了呀。。。

服务端> 可以了，你可以播放了

这个看出客户端要通过很多次询问后，才能知道服务端什么时候准备就绪，这样如果发送请求的客户特别多，请求频率特别高这无疑会给服务端造成了不小的压力。

如果有那么一种方式可以让服务端想客户端推送消息，就可以完美解决这一情况，于是WebSocket出现了。

WebSocket的使用

WebSocket是HTML5的新协议，所以支持HTML5的浏览器都能直接使用WebSocket不需要额外安装，什么开发包，或者插件。

为了测试WebSocket我们需要简单的搞一个服务端程序。Node.js本身支持的协议包括TCP协议和HTTP协议，但不支持WebSocket，为了让让node也支持WebSocket，这里我选用ws模块。

测试

创建一个名为testWebSocket的文件夹，使用npm init 初始化项目

配置package.json文件添加，这里选用ws的最新的版本

"dependencies": {
　　"ws": "^6.2.1"
}

在根目录使用npm指令npm install --save，把ws相关依赖都拉下来。

然后创建一个名为myWebSocketServer.js的文件，一个简单的WebSocket服务端程序完成，

node myWebSocketServer.js先让服务端跑起来。

// 导入WebSocket模块:
const WebSocket = require('ws');
let i = 1;
​
// 引用Server类:
const WebSocketServer = WebSocket.Server;
​
// 实例化:
const myWs = new WebSocketServer({
    port: 8080
});
​
myWs.on('connection', ws => {
    ws.on('message', message => {
        console.log('received: %s', message);
    });
​
    setInterval(() => {
        ws.send('Hello siegaii this is serverMessage!' + i);
        i++;
    }, 1000);
​
});

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<button id="test">hello siegaii</button>
​
<script>
    let ws = new WebSocket('ws://localhost:8080/testWebSocket');
    document.getElementById('test').addEventListener('click', () => {
        ws.send('Hello Siegaii this is clientMessage!');
    });
​
    // 响应onmessage事件:
    ws.onmessage = (msg) => {
        console.log(msg);
    };
​
</script>
</body>
</html>

运行结果如下

API

简单介绍下WebSocket的api

// WebSocket Api
let socket = new WebSocket(url, [protocol] ); // 实例化一个WebSocket对象建立连接
/**
* socket的readyState属性
* 0 - 表示连接尚未建立。
* 1 - 表示连接已建立，可以进行通信。
* 2 - 表示连接正在进行关闭。
* 3 - 表示连接已经关闭或者连接不能打开。
*/
socket.readyState
​
/**
* 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
*/
socket.bufferedAmount
​
/**
* WebSocket 事件
*/
socket.onopen(); //连接建立时触发
socket.onmessage(); //客户端接收服务端数据时触发
socket.onerror(); //通信发生错误时触发
socket.onclose(); //连接关闭时触发
​
/**
* WebSocket 方法
*/
Socket.send() //使用连接发送数据
Socket.close() //关闭连接
​

关于WebSocket需要知道的更多相关文章

  1. 漫扯:从polling到Websocket

    Http被设计成了一个单向的通信的协议,即客户端发起一个request,然后服务器回应一个response.这让服务器很为恼火:我特么才是老大,我居然不能给小弟发消息... 轮询 老大发火了,小弟们自 ...

  2. 细说WebSocket - Node篇

    在上一篇提高到了 web 通信的各种方式,包括 轮询.长连接 以及各种 HTML5 中提到的手段.本文将详细描述 WebSocket协议 在 web通讯 中的实现. 一.WebSocket 协议 1. ...

  3. java使用websocket，并且获取HttpSession，源码分析

    转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/6238826.html 一:本文使用范围 此文不仅仅局限于spring boot,普通的sprin ...

  4. WebSocket - ( 一.概述 )

    说到 WebSocket,不得不提 HTML5,作为近年来Web技术领域最大的改进与变化,包含CSS3.离线与存储.多媒体.连接性( Connectivity )等一系列领域,而即将介绍的 WebSo ...

  5. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

  6. Demo源码放送：打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  7. Cowboy 开源 WebSocket 网络库

    Cowboy.WebSockets 是一个托管在 GitHub 上的基于 .NET/C# 实现的开源 WebSocket 网络库,其完整的实现了 RFC 6455 (The WebSocket Pro ...

  8. 借助Nodejs探究WebSocket

    文章导读: 一.概述-what's WebSocket? 二.运行在浏览器中的WebSocket客户端+使用ws模块搭建的简单服务器 三.Node中的WebSocket 四.socket.io 五.扩 ...

  9. 细说websocket - php篇

    下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分,这个部分在 node 中可以十分轻松的完成,因为 node 提供的 net 模块已经对 socket ...

  10. webSocket and LKDBHelper的使用说明

    socketket与lkdbhelper来处理数据 客户需求: 当我们有需要从自己的后台推送消息给我们的用户时,用户需要实时的接收到来自我们的推送消息.前提是没有使用第三方的推送框架,那么这个使用we ...

随机推荐

  1. STL读书笔记

    vector - 会自动增长的数组 vector又称为向量数组,他是为了解决程序中定义的数组是不能动态改变大小这个缺点而出现的.一般程序实现是在类创建的时候同时创建一个定长数组,随着数据不断被写入,一 ...

  2. Webpack vs Browersify vs SystemJs for SPAs

    https://engineering.velocityapp.com/webpack-vs-browersify-vs-systemjs-for-spas-95b349a41fa0 Right no ...

  3. Oracle 11g一步步安装详解

    本文所需的安装包都存放在我网盘中,需要的私聊~ 一.安装VMware tools工具(非必须) 1.虚拟机上点击安装 因为我在虚拟机中做的,后面oracle 安装是图形化安装,需要屏幕大一点,不然有些 ...

  4. android点击返回键，如何做到不destory当前activity，只是stop。重新返回该activity的 时候可以直接使用，不需要创建新的activity实例

    问题描述,如题目: android点击返回键,顺序执行 pause,stop,destory. 以至于想重新进入这个activity的时候还要重新执行onCreate()方法,那么如何解决不再重新执行 ...

  5. 我们常说的 CAS 自旋锁是什么

    CAS(Compare and swap),即比较并交换,也是实现我们平时所说的自旋锁或乐观锁的核心操作. 它的实现很简单,就是用一个预期的值和内存值进行比较,如果两个值相等,就用预期的值替换内存值, ...

  6. php面向对象中的魔术方法

    原创,转载请注明出处 在 PHP 中以两个下划线开头的方法,__construct(), __destruct (), __call(), __callStatic(),__get(), __set( ...

  7. 在Web中获取MAC地址

    很多时候都很难琢磨客户在想什么,也许是自己业务经验不足,也许是客户要显示出他在软件方面也非常的专业.记得以前听过一个故事,说一个富人想娶个媳妇,然后他比较钟意的有三个女人,然后就想从三个女人中选一个, ...

  8. 深入理解css3中的线性渐变

    css3中的线性渐变 线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, & ...

  9. java基础- Collection和map

    使用构造方法时,需要保留一个无参的构造方法 静态方法可以直接通过类名来访问,而不用创建对象. -- Java代码的执行顺序: 静态变量初始化→静态代码块→初始化静态方法→初始化实例变量→代码块→构造方 ...

  10. 【读英文文档】Whetting Your Appetite（刺激你的食欲）

    如果你有很多工作是通过计算机来完成的,那么你一定希望其中的很多事情能够自动地实现.比方说,你希望在文本文件中实现查找和替换的功能,以某一种机制实现照片的重命名以及重新排序的功能,一个小型的数据库甚至是 ...