ajax与websocket的区别以及websocket常用使用方式 介绍

所属分类: 网络编程 / AJAX相关 阅读数: 1912
收藏 0 赞 0 分享

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

一般前端与后端的交互主要是使用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中文乱码问题解决方案

ajax中文乱码问题在中文中经常会出现这种问题,其实只要稍加注意就不会出现ajax中文乱码这回事情了,接下来为大家详细介绍下如何解决这类问题
收藏 0 赞 0 分享

jquery ajax实现批量删除具体思路及代码

回调函数,在请求完成后需要进行的操作:此处是把选中的checkbox去掉,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈,希望对你有所帮助
收藏 0 赞 0 分享

JQuery+ajax实现批量上传图片(自写)

jquery+ajax方式实现单张图片上传的代码是可以搜的到,实现批量上传图片的程序却没搜索到于是自己写了个,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

利用Ajax实现在脚本里传值实例介绍

Ajax实现在脚本里传值可以解决实际上的一些问题,本文实现了一下,感兴趣的朋友可以参考下,希望可以帮助到你
收藏 0 赞 0 分享

jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

CSS也使得表格的布局越来越光彩耀人。但是,无论如何,都掩饰不了那些包装下的死板,接下来为大家介绍下让那些死板的数据 更具有可读性、可用性
收藏 0 赞 0 分享

jQery ajax——load()方法示例介绍

load(url,[data],[callback])url:加载的页面地址;data: 可选项,发送到服务器的数据,格式是key/value;callback:可选项,回调函数,示例代码如下
收藏 0 赞 0 分享

滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用特在此与大家一起分享,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

ajax 登录功能简单实现(未连接数据库)

未连接数据库下实现ajax 登录功能判断登陆成功与失败,喜欢ajax的朋友可以参考下哈,希望对大家有所帮助
收藏 0 赞 0 分享

AJAX和WebService实现邮箱验证(无刷新验证邮件地址是否合法)

首先在项目里面添加服务引用,验证 Email 地址是否正确(邮件地址合法、只是域名正确、邮件服务器没有找到等等)感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

AJAX和三层架构实现分页功能具体思路及代码

本文涉及到AJAX和三层架构方面的知识,在学习分页的同时也巩固了一下它们的相关知识,适合初学者的你
收藏 0 赞 0 分享
查看更多