前后端如何互联?---websocket

1. pc端的应用,一般会采用前端定时请求后台;

2. app定时去访问后台的话,对用户来说并不友好,会消耗大量的流量,移动端最好的方式就是后台主动向app推送信息;

3. H5提供了一种比较好的方式是websocket,打开app后,向后台发出请求,后台响应后,就可以实时向前端推送信息了,而无需app再次去访问;

4.websocket的前端实现方法:

websocket = null;  
url="127.xxxxxxx/xxx"  
var websocketAddress = ‘ws://‘+ url  ;
//判断当前浏览器是否支持WebSocket  
if(‘WebSocket‘ in window){  
    websocket = new WebSocket(websocketAddress);  
}  
else{  
    alert(‘当前浏览器不支持WebSocket‘)  
}  
//连接发生错误的回调方法  
websocket.onerror = function(){  
    //notificationReminder("错误");  
};  
  
//连接成功时的回调方法  
websocket.onopen = function(event){  
    console.log(event);  
}  
  
//接收到消息的回调方法  
websocket.onmessage = function(event){  
    $scope.notificationReminder(event.data);  
}  
  
//连接关闭的回调方法  
websocket.onclose = function(){  
    //notificationReminder("关闭");  
}  
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。  
window.onbeforeunload = function(){  
    websocket.close();  
}  
  
//发送消息  
$scope.send = function(){  
    websocket.send(localStorageService.get(‘UserID‘));  
}  
$scope.closeWebSocket = function(){  
    websocket.close();  
}  
时间: 2024-10-01 01:17:34

前后端如何互联?---websocket的相关文章

写给刚入门的前端工程师的前后端交互指南

转自原文 写给刚入门的前端工程师的前后端交互指南 作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据.毕竟,我们要构建一个大的web应用,必然不是普普通通的静态页面构成. 下文将罗列将来前端工程师应该必备的同后端打交道的常用技能. 服务端渲染 谈起服务端渲染,对于动态服务而言,这个世界上跑的大多数页面都经历过服务端的数据渲染,接口->前端赋值->模版渲染 .这一切都在服务器完成,我们查看源码时候

如何简单区分Web前后端与MVC

MVC是开发所有软件所必须涉及的基本几个划分 M主要负责数据与模型,V主要负责显示C主要负责交互与业务所以不管是前端还是后端,都是有MVC的.MVC是一个对于软件简单的抽象,不管是M还是V,还是C都是有很多细分的.所以理解MVC是一种业务抽象是非常重要的. 前端MVC 前端流行的MVVM就是对于前端MVC结构的一次重新定义.特别是angular这样的框架出来后,前端的MVC就非常完善了.再加上SPA与混合APP的流行,MVC在前端就是一个完整的体系.同理后端一样是有MVC的. 后端MVC 基本上

前后端数据交互方法

在此介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率. 此文章适合前后端协同开发经验不足的新手阅读. 目录: HTML赋值 JS赋值 script填充JSON AJAX获取JSON WebSocket实时传输数据 总结 HTML赋值 输出到 Element 的 value 或 data-name <input type="hidden" value="<?php echo $user_avatar;?>" /> &

前后端协同开发

来源:http://www.jb51.net/article/63588.htm 此文章适合前后端协同开发经验不足的新手阅读.(转) HTML赋值 输出到 Element 的 value 或 data-name ? 1 2 <input type="hidden" value="<?php echo $user_avatar;?>" /> <div data-value="<?php echo $user_avatar;

前后端分离后的前端时代

本文从前端开发的视角,聊一聊前后端分离之后的前端开发的那些事儿.阅读全文,大约需要8分钟. 什么是前后端分离 除了前端之外都属于后端了. 你负责貌美如花,我负责赚钱养家 在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的状态中,可以说是没有独立的"人格"可言. 前端负责切图和编写静态页面模板,后端将数据渲染到前端提供的页面模板中,最后将页面渲染到浏览器展示. 这个过程中,前端只提供页面模板或者写一些JavaScript脚本,有的甚至JS脚本都是后端来写,前端的作用只局限

html5与EmguCV前后端实现——人脸识别篇(一)

上个月因为出差的关系,断更了很久,为了补偿大家长久的等待,送上一个新的系列,之前几个系列也会抽空继续更新. 大概半年多前吧,因为工作需要,我开始研究图像识别技术.OpenCV在这方面已经有了很多技术积累,在html5领域也很早就有了这方面的Demo.但是一番学习下来,我发现基本上这方面的文章大都比较零散片面,而且很多关键的代码可能已经老化不能正常使用了.所以这个系列的文章中,我将对html5与EmguCV的整体开发过程做一个整理,逐步介绍怎么使用html5技术和EmguCV类库实现各种看上去高大

实现前后端数据交互的方法

前端工程师的职责:1.UI重构  2.在正确的区域渲染出服务端的数据. 毕竟,我们要构建一个大的web应用,必然不是普普通通的静态页面构成. 下文将罗列前端工程师应该必备的同后端打交道的常用技能. 1.服务端渲染 谈起服务端渲染,对于动态服务而言,这个世界上跑的大多数页面都经过服务端的数据渲染,接口->前端赋值->模板渲染. 这些都是在服务器完成,在我们查看源码的时候,可以看到完整的html代码,包括每个数据值. 常用的php模板:Smarty,Blade,Mustache. 如果使用Node

前后端分离模式

我是做java出身的前端开发工程师经历过由前端视图逻辑和后端的业务逻辑混合的开发模式, 在到由ajax跨域请求来进行前后端的分离的模式,最后到由nodejs来进行前后端的分离, 今天就分别站在不同的视角上尽可能的为大家剖析下这几种模式的优缺点. 前后端逻辑混合开发模式: 这种开发模式在现在来看几乎没有什么优点,但是在很多互联网公司依然在用,我想这大概是历史原因造成的吧, 也有可能缺乏技术体系的整体思想,但是也不能完全否定其优点,与第二种开发模式相比较. 优点: 1. 用户体验好,在相同的网络条件

从零开始搭建django前后端分离项目 系列一(技术选型)

前言 最近公司要求基于公司的hadoop平台做一个关于电信移动网络的数据分析平台,整个项目需求大体分为四大功能模块:数据挖掘分析.报表数据查询.GIS地理化展示.任务监控管理.由于页面功能较复杂,所以采用前后端分离方式开发.前端采用webpack+vue+vue-router+axios技术栈,后端用django进行开发.从搭建到上线,整个项目前前后后花了差不多一个月时间,中途也遇到一些问题,不过还好都解决了.由于是个人项目,所以我打算把源码贡献出来大家一起讨论学习. 源代码 https://g