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

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

通常前端与后端的交互主要是使用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异步操做等待返回值或者返回值后本身操做时间太长而让用户等待过久的烦恼。而这一技术如今也广泛的用在了

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

不过值得注意的是通常状况下若是推送量较为大的话公司会选择一些比较大的云服务来作，好比笔者的公司就是使用的融云服务来作的，等笔者有空的话会专门开一次坑讲一讲融云服务的教程