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

一般前端与后端的交互主要是使用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常用使用方式 介绍,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

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

  1. 五分钟学会HTML5的WebSocket协议

    这篇文章主要介绍了五分钟学会HTML5的WebSocket协议,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  2. 前端监听websocket消息并实时弹出(实例代码)

    这篇文章主要介绍了前端监听websocket消息并实时弹出,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. HTML5 WebSocket实现点对点聊天的示例代码

    这篇文章主要介绍了HTML5 WebSocket实现点对点聊天的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. ios – Websockets可以在移动电话上工作吗?

    相关地,我怀疑长轮询客户端可能是实现类似功能的好方法,但我想知道我可能遇到的移动特定问题.到目前为止,我已经读过长时间的轮询请求可能会对电池寿命产生相当大的影响.我还听说iOS以某种方式限制了对单个服务器的连接数量,这可能是个问题.有没有人在使用实时组件的移动应用程序上工作?

  5. ios-swift,objective-c协议实现

    作为隐式解开的可选项.

  6. ios – 红蜘蛛代表没有被召集

    变量不是nil,我有一个很好的连接,url是正确的,但没有调用委托方法.我也正在实现WebSocketDelegate解决方法套接字应该是您的类的属性或变量,以确保它附近.如果仅在函数堆栈上分配它,它将超出范围,并且永远不会调用委托以下是我在项目中使用的代码,以防万一这是link到故事板,以防万一你想要

  7. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  8. swift 实现websocket与后台通信(swift 如何构建简单的json字符串)

    一个应用不可避免要与服务器进行通信,主要有,http与socket。http暂时不论,我们先看看socket下面衍生的websocket,今天我就把自己怎么利用websocket与服务器进行交互记录下来:首先你需要集成websocket到自己的项目,如果不明白如何集成,请看上一篇《swift集成websocket库》集成websocket到自己项目后还需要添加SwiftyJSON到自己项目,具体步骤和集成websocket一样。首先打开你项目,记得通过cocoapods生成的.xcworkspace文件打

  9. 如何在Android上托管REST webservices?

    有没有人知道一个用Java编写的能够在Android上托管REST服务的开源Web服务器?

  10. android – WebSocket没有关闭重装应用程序(React Native)

    附:哦,我用Android进行测试.解决方法你的代码看起来不错.通过刷新你的意思是在调试模式下运行时刷新javascript?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部