vue2.0开发聊天程序(五) 客户端的webScoket

华核
• 阅读 4441

愿天下所有的情侣,都是失散多年的兄妹
                  ——好妹妹
webScoket是html5提出的一个协议,咱们用的http是无状态的,且只能由客户端向服务端发起,并且服务端返回结果之后就宣告此次连接结束。为了解决这种问题,出现了轮询(polling)和comet技术。
轮询:
客户端设置一个间隔时间不断的去向服务端发起请求,频繁的查询数据有没有改动,这样增加了请求次数,浪费流量和服务器资源。
comet:
又可以分为长轮询流技术长轮询就是指为需要更新的数据设置一个过期时间,过期了才去发起请求,这样就不会很频繁的去发起求情,但服务器仍然是被动的。流技术就是指客户端使用一个隐藏的窗口(iframe)与服务器建立一个http长连接,服务器会不断的更新状态,保持连接的存活,这样做的弊端是在高并发的情况下比较考验服务器的性能。

webScoket很不一样,基于TCP协议,与http协议兼容、却不会融入http协议,仅仅作为html5的一部分。与http协议不同的请求/响应模式不同,Websocket在建立连接之前有一个Handshake(Opening Handshake)【握手】过程,在关闭连接前也有一个Handshake(Closing Handshake)过程,
建立连接之后,双方即可双向通信。

以上参考自很多博客,这里就不一一贴出了。

webScoket的使用方法
在客户端使用webScoket是非常简单的一件事情。
先看看兼容性:
vue2.0开发聊天程序(五) 客户端的webScoket

创建连接

var ws = new WebSocket('ws://localhost:3333');

构造函数接收两个参数:
url: 这里的url不能是http://或者https:// 而是对应的ws://或者wss:// ws和wss是webScoket定义的两种url方案,ws类似于http wss类似于https
protocols:协议名称,是可选的。服务端和客户端的协议名称必须一致。协议有三种:注册协议,开放协议,自定义协议。

webScoket的属性
webScoket就仨属性:

  1. readyState
    代表连接的状态有以下四种: 0 表示未连接 1 连接已经建立 2 连接即将关闭 3 连接关闭或不可用

  2. bufferedAmount
    有时候需要检查传输数据的大小,尤其是客户端传输大量数据的时候。虽然send()方法会马上执行,但数据并不是马上传输。浏览器会缓存应用流出的数据,你可以使用bufferedAmount属性检查已经进入队列但还未被传输的数据大小。这个值不包含协议框架、操作系统缓存和网络软件的开销。

var THRESHOLD = 10240; //限制10k以内
if (ws.bufferedAmount < THRESHOLD) {
        ws.send('heheheheeheh');
    }

3.protocol: 就是在构造函数中选传的参数。

webScoket的事件
这里的事件,指的是webScoket的状态open、message、error、close。

  1. open
    在握手完成是触发,对应的回调函数是onopen,当打开后要做的操作在onopen中添加

ws.onopen = function () {
    console.log('连接成功');
}
  1. message
    当消息被接收时就会触发此事件,对应的回调是onmessage,webScoket消息机制只支持字符串和二进制(blob和ArrayBuffer)

ws.onmessage = function(res) { // res为接收到的数据
    console.log(res)
}
  1. error:
    如果发生意外的失败会触发error事件,相应的函数称为onerror,错误会导致连接关闭,同时触发关闭事件。

ws.onerror = function(e) { // e为错误信息
    console.log("WebSocket Error: " , e);
};

4.close
close:当连接关闭的时候触发的时间,对用一个onclose方法。

ws.onclose = function(e) { // e为关闭的原因
    console.log("Connection closed", e);
};
 

webScoket的方法
就俩方法send和close。

send
用于向服务端发送一条消息,需要注意的是,此方法应该在onopen事件的回调中执行,因为连接打开之后才能进行数据的传输。只接收一个参数,就是你要传输的数据。

    ws.send('你是狗吧?'); // 记得放在onopen方法里面

close
关闭连接,如果连接已经关闭了 那就什么都不会做。接收两个参数code、reason

code: 状态码,如果不传默认就是1000 表示正常关闭 状态码参考https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
reason: 关闭的原因
ws.close(1000,'没事关一下');

以上客户端的webScoket就介绍完了。真正复杂的是服务端的webScoket,这个还在研究中。下一节再说。

点赞
收藏
评论区
推荐文章
灯灯灯灯 灯灯灯灯
3年前
一篇文带你了解什么是一片Cookie走天下
概念Cookie是服务端发送到用户浏览器并且保存到本地的一小块数据,它会在浏览器下次向同一服务器发起请求时,被携带到服务器上。为什么有cookie因为HTTP协议是无状态的(HTTP协议是无状态的协议。一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。),即服务器不知道用户上一次做了什么,
待兔 待兔
11个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
3年前
java 实现websocket
最近了解了下websocket和socket这个东西,说不得不来说下为何要使用WebSocket,和为何不用http。为何需要WebSocket?HTTP协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理。这种通信模型有一个弊端:HTTP协议无法实现服务器主
海军 海军
4年前
5分钟快速梳理你的HTTP体系
HTTP定义1.HTTP(超文本传输协议)是客户端与服务端之间信息交流的桥梁。2.在信息交流之前必须要做的就是客户端通过连接TCP/IP协议80端口,以便服务端侦听HTTP请求。3.HTTP是一种通用的,无状态的应用层协议,基于标准客户机/服务器模型。HTTP特点1.采用“请求/
Stella981 Stella981
3年前
BIO、NIO、AIO系列二:Netty
一、概述Netty是一个Java的开源框架。提供异步的、事件驱动的网络应用程序框架和工具,用以快速开发高性能、高可靠性的网络服务器和客户端程序。Netty是一个NIO客户端,服务端框架。允许快速简单的开发网络应用程序。例如:服务端和客户端之间的协议,它简化了网络编程规范。二、NIO开发的问题
Stella981 Stella981
3年前
Django初识(web框架,django下载安装,http协议)
一web框架的本质及自定义web框架我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端,基于请求做出响应,客户都先请求,服务端做出对应的响应,按照http协议的请求协议发送请求,服务端按照http协议的响应协议来响应请求,这样的网络通信,我们就
Stella981 Stella981
3年前
Ajax轮询,Ajax长轮询和websocket简单介绍
1、ajax轮询ajax轮询的原理非常简单,让浏览器隔个几秒就发送一次请求,询问服务器是否有新信息。客户端:你好在吗?客户端:你好在吗?客户端:你好在吗?服务端:在的2、longpoll(长轮询)其实原理跟ajax轮询差不多,都是采用轮询的方式,不过采取的是阻塞模型(一直在呼叫,等不到你,我愿孤独终老,很执着),也就是说
Stella981 Stella981
3年前
Netty权威指南 第2章NIO 入门读书笔记
2.1传统的BIO编程采用BIO通信模型的服务端,通常由一个独立的Acceptor线程负责监听客户端的连接,它接收到客户端连接请求之后为每个客户端创建一个新的线程进行链路处理,处理完成之后,通过输出流返回应答给客户端,线程销毁。这就是典型的一请求一应答通信模型。如果不创建线程,还是在主线程中处理请求,则整个服务端是单线程处理能力,待第一个客户端请
Stella981 Stella981
3年前
Redis pipeline(12)
常规的连接客户端一般有3种请求方式:1.Client2.Pipeline3.事务三中模式的区别Client模式:就是客户端发送一个命令,阻塞等待服务端执行,然后读取返回结果。Pipeline模式:是一次性发送多个命令,最后一次取回所有的返回结果,这种模式通过减少网络的往返时间和io读写次数,大幅度提高通信性能。事
Stella981 Stella981
3年前
Android用户操作web后台登录后获取cookie安全通行证认知
     HTTP客户端编程中最常碰见的问题,很多网站的内容都只是对注册用户可见的,这种情况下就必须要求使用正确的用户名和口令登录成功后,方可浏览到想要的页面。因为HTTP协议是无状态的,也就是连接的有效期只限于当前请求,请求内容结束后连接就关闭了。在这种情况下为了保存用户的登录信息必须使用到Cookie机制。以JSP/Servlet为例,当浏览器请
3A网络 3A网络
2年前
一文读懂浏览器存储与缓存机制
一文读懂浏览器存储与缓存机制浏览器存储CookieCookie是HTTP协议的一种无状态协议。当请求服务器时,HTTP请求都需要携带Cookie,用来验证用户身份。Cookie由服务端生成,存储在客户端,用来维持状态。通常Cookie由以下值构成:名称(name)值(value)域(Domain)值(value)路径(Path)