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. C++ 进制转换 十进制十六进制八进制二进制相互转换

    思路: 下面我把相互转换的所有类型都写出来了.实际上都是通过十进制中转的,这样比较简单,写出X进制转成十进制和从十进制转成X进制的两份代码直接拷贝就完成了剩余的部分.哦,对,自己封装了一个charTo ...

  2. java解析XML文件四种方法之引入源文件

    1.DOM解析(官方) try { DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();         Documen ...

  3. 在win10下给vs2013配置opencv3.0

    opencv这玩意是真难搞呀. 先吐槽下..... 下面进入正文. 1准备工具: opencv3.0+vs2013 这里面不提供链接下载,自行谷歌百度. 2配置环境: a.打开下载好的opencv(解 ...

  4. CSS 静态进度条效果

    今天学习到了实现一个静态进度条的方法,固写一篇笔记稳固一下自己的知识. 最终的效果如下,进度条放在一个框里,水平宽自适应. 现在就开始,首先写一个进度条先. .progress-bar{ /* 进度条 ...

  5. springboot集成rabbitmq（实战）

    RabbitMQ简介RabbitMQ使用Erlang语言开发的开源消息队列系统,基于AMQP协议来实现(AMQP的主要特征是面向消息.队列.路由.可靠性.安全).支持多种客户端,如:Python.Ru ...

  6. 使用input file上传文件中onChange事件只触发一次问题

    每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...

  7. Linux设置开放一个端口

    修改防火墙配置需要修改 /etc/sysconfig/iptables 这个文件,如果要开放哪个端口,在里面添加一条. -A RH-Firewall-1-INPUT -m state --state ...

  8. c语言之单链表的创建及排序

    今天对之前学习过的链表知识进行简单的总结顺便写点代码:创建一个链表有头插法跟尾插法两种,在下面代码中我们为结点分配的内存实在堆上分配的,因此需要我们手动释放,释放用free()函数 下面代码贴出具体代 ...

  9. [求教]利用typescript对Javascript做强类型检测提示

    近期在学习typescript的时候,发现ts居然可以对原生js做强检测.发现从v2.3就开始直接了.这让我感叹他的变化,又让我自己感到学习的缓慢.本文章就对他小试牛刀一下. 一.他是的使用与支持 通 ...

  10. DAY2-MySQL专业安装

    MySQL安装 安装方法: 1.源码 2.二进制 (建议使用) 3.rpm (尽量不用) 一.下载MySQL: 一定要从官网下载,防止被勒索. 官网: http://dev/mysql.com 版本: ...