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. 移动端调试技巧（禁止webviuew,inspect等）

    如果由于某种原因(天朝FQ),不能支持google 的 inspect  调试 或者再想在某个APP里面调试你的页面,但是没有打开APP的webview ,也不能授权调试 在或者,Fider 可以拦截 ...

  2. spring cloud 入门系列五：使用Feign 实现声明式服务调用

    一.Spring Cloud Feign概念引入通过前面的随笔,我们了解如何通过Spring Cloud ribbon进行负责均衡,如何通过Spring Cloud Hystrix进行服务断路保护,两 ...

  3. Fiddler抓包使用教程-断点调试

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/62896784 本文出自[赵彦军的博客] Fiddler 里面的断点调试有2种方式. ...

  4. 开源纯C#工控网关+组态软件(十)移植到.NET Core

    一.   引子 写这个开源系列已经十来篇了.自从十年前注册博客园以来,关注了张善友.老赵.xiaotie.深蓝色右手等一众大牛,也围观了逗比的吉日嘎啦.精密顽石等形形色色的园友.然而整整十年一篇文章都 ...

  5. 计算机协议、标准以及OSI模型的简单介绍

    由概念启发学习,引导学习.本篇文章中包含了一些最基本的概念和底层知识.虽然零碎,但是这是基础. 一.协议和标准 协议指的是一组控制数据通信的规则.协议有三要素:语法(syntax),语义(semant ...

  6. capwap学习笔记——初识capwap（四）（转）

    2.5.7 CAPWAP传输机制 WTP和AC之间使用标准的UDP客户端/服务器模式来建立通讯. CAPWAP协议支持UDP和UDP-Lite [RFC3828]. ¢ 在IPv4上,CAPWAP控制 ...

  7. java的Calendar，获取月份少一月的问题及其它注意事项

    java的Calendar,获取月份少一月的问题及其它注意事项: import java.util.*; public class DateClass{ public static void main ...

  8. Linux内核编程、调试技巧小集

    1. 内核中通过lookup_symbol_name获取函数名称 内核中很多结构体成员是函数,有时可能比较复杂不知道具体使用哪一个函数.这是可以通过lookup_symbol_name来获取符号表名称 ...

  9. ROC曲线的计算

    1.ROC曲线简介 在评价分类模型时,会用到ROC(receiver operating characteristic)曲线.ROC曲线可用来评价二元分类器( binary classifier)的优 ...

  10. Day4 《机器学习》第四章学习笔记

    决策树 前几天学习了<机器学习>的前三章,前三章介绍机器学习的基础知识,接下来,第四章到第十章介绍一些经典而常用的机器学习方法,这部分算是具体的应用篇,第四章介绍了一类机器学习方法——决策 ...