笔者近期在公司的项目中渐渐的接触了一些比较高级的业务逻辑处理,其中比较有意思的地方就是前端接受后台给与的推送问题。

一般前端与后端的交互主要是使用ajax进行异步操作调用交互,比较有趣的是这种交互方式一般都是单项交互的--

-及前端给后端发出请求后端接受请求后执行操作,即便前端可以接受后端给予的返回值,但是与后端交互的主动权始终是放在前端手里面。

而这样就会遇到两个有意思的问题--

1.前端如果调用的接口后端操作事件过长可能会导致返回操作响应时间过长,如果此时用户单击其他页面的时候就会导致返回操作无法正常解决。

2.如果后端有什么比较重要的问题需要推送给前端消息,这个时候前端是无法接收到的。

面对这两个问题的主流解决办法分别为
针对第一条我们会给整个页面做一个加载中的动画并且锁定住整个页面从而强迫用户等待到整个后端返回值结束后再将页面解锁。

而对于第二点我们就要引入我们今天所讲的websocket这个概念。


一.什么是websocket

websocket协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

而他与常规的ajax最大的不同在于他可以双向接受和发送

一.websocket的简单使用

对于我们前端来说websocket的使用方式非常简单,协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。我们只需要自己定义一个ws服务就可以了

代码如下

var ws = new WebSocket("URL路径");

ws.onopen = function(evt) {
console.log("打开成功");
ws.send("Hello WORD!");
}; ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
}; ws.onclose = function(evt) {
console.log("服务关闭");
};

如以上代码所示我们成功的创建了一个简单的名字为WS的websocket服务并且想后台定义的路径中发送了一条hello word的简讯并且会在接收到推送的时候打印Received Message

在你的ws服务打开以后会在前端的内一直处于挂起状态,由于现在框架横行,当你的框架或者说前端项目经过node编译或者运行时候你可以把ws服务写在所有页面的模板中就可以让项目只要处于被打开状态就能一直运行

这个时候你需要写接受推送消息即可,判断后端给你推送消息的类型并且做出相应的操作,完全不需要有ajax异步操作等待返回值或者返回值后自己操作时间太长而让用户等待太久的烦恼。而这一技术现在也普遍的用在了

在线聊天室和一些需要接受推送提示的地方。

不过值得注意的是一般情况下如果推送量较为大的话公司会选择一些比较大的云服务来做,比如笔者的公司就是使用的融云服务来做的,等笔者有空的话会专门开一次坑讲一讲融云服务的教程

 

ajax与websocket的区别以及websocket常用使用方式的更多相关文章

  1. 小白需要了解的Ajax和websocket的区别以及使用场景!

    在我们日常使用的互联网产品中,很多都是前后端数据的交互来完成的,说到数据交互就不得不提Ajax和websocket,它们可是数据交互的利器,那么它们分别是什么?websocket与Ajax轮询的区别又 ...

  2. WebSocket和long poll、ajax轮询的区别,ws协议测试

    WebSocket和long poll.ajax轮询的区别,ws协议测试 WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连 ...

  3. 前后端常用通讯方式-- ajax 、websocket

    一.前后端常用通讯方式 1. ajax  浏览器发起请求,服务器返回数据,服务器不能主动返回数据,要实现实时数据交互只能是ajax轮询(让浏览器隔个几秒就发送一次请求,然后更新客户端显示.这种方式实际 ...

  4. socket 与 websocket的区别

    区别: socket并不是一个协议,而是抽象出来的一层,应用于应用层和传输控制层之间的一组接口, socket是传输控制层协议,websocket是应用层协议 websocket是什么样的协议,具有什 ...

  5. HTTP 和 WebSocket的区别

    有关http和WebSocket 的区别网上有很多的质料. 个人在此仅仅是记录以下自己的学习心得,自己的理解. 1. http协议是用在应用层的协议,他是基于tcp协议的,http协议建立链接也必须要 ...

  6. WebSocket(二)-WebSocket、Socket、TCP、HTTP区别

    原文地址:Socket 与 WebSocket 1. 概述 WebSocket 是为了满足基于 Web 的日益增长的实时通信需求而产生的.在传统的 Web 中,要实现实时通信,通用的方式是采用 HTT ...

  7. python中socket、socketio、flask-socketio、WebSocket的区别与联系

    socket.socketio.flask-socketio.WebSocket的区别与联系 socket 是通信的基础,并不是一个协议,Socket是应用层与TCP/IP协议族通信的中间软件抽象层, ...

  8. 小渣渣的json和jsonp和ajax的实质和区别

    json和jsonp和ajax的实质和区别ajax的两个问题 1.ajax以何种格式来交换数据 2.跨域的需求如何解决 数据跨域用自定义字符串或者用XML来描述 跨域可以用服务器代理来解决jsonp来 ...

  9. WebSocket实践——Java实现WebSocket的两种方式

    什么是 WebSocket? 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信 ...

随机推荐

  1. javascript实现数据结构: 树和森林

    树的3种常用链表结构 1 双亲表示法(顺序存储结构) 优点:parent(tree, x)操作可以在常量时间内实现 缺点:求结点的孩子时需要遍历整个结构 用一组连续的存储空间来存储树的结点,同时在每个 ...

  2. VBScript开发Excel常见问题

    VBS基础 基本概念:VB & VBS & VBA VB.VBScript和VBA(Visual Basic For Application)这三种语言,既有联系又有区别.三种语言的语 ...

  3. Android踩坑随笔Fragment中onActivityResult方法不被调用

    最近项目里要做头像功能,参考了这篇博客(GitHub - zhudfly/SelectAvatarApplication: 一个选择并显示头像圆形控件,可以通过拍照或者选择相册中的图片来设置图片),但 ...

  4. 前端构建工具Gulp的学习和使用

    前几天刚鼓捣了Grunt的使用,结果文档还没捂热,老大说我们还是用gulp吧,搞得我又得来整gulp,眼泪流成河了,真是不晓得底层人民的辛苦啊.不过经过对gulp的学习,发现很好用,比grunt舒服! ...

  5. Spring Boot框架搭建

    用idea搭建Springboot还是很方便的 环境变量是JDK1.8 SpringBoot自带了Tomcat启动也很方便 1.创建项目 2. 3.选择SpringBoot的版本以及组件 4.创建完成 ...

  6. 学习笔记:如何阻止Web应用存储敏感数据

    在某些情况下,自定义Web应用会保存敏感(专有)数据到用户的缓存文件夹中.如果不重新架构该应用,使用Sysinternals SDelete的注销脚本是否可以确保数据完全被删除且没有任何可恢复残留呢? ...

  7. haproxy开启日志功能

    haproxy在默认情况不会记录日志,除了在haproxy.conf中的global段指定日志的输出外,还需要配置系统日志的配置文件.下面以centos6.4为例,haproxy使用系统自带的rpm报 ...

  8. Linux提权后获取敏感信息的方法与途径

    在本文开始之前,我想指出我不是专家.据我所知,在这个庞大的区域,没有一个“神奇”的答案.分享,共享(我的出发点).下面是一个混合的命令做同样的事情,在不同的地方,或只是一个不同的眼光来看待事物.我知道 ...

  9. 单例模式中的volatile关键字

    在之前学习了单例模式在多线程下的设计,疑惑为何要加volatile关键字.加与不加有什么区别呢?这里我们就来研究一下.单例模式的设计可以参考个人总结的这篇文章   背景:在早期的JVM中,synchr ...

  10. canvas小球 时间demo

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...