web前端socket封装库--giraffe

简介: web前端socket封装库--giraffe

摘要:


     

最近在做前端的socket消息推送,使用了socket.io.js的最新版本。使用过的都知道socket.io.js是基于消息类型来通信的,如果消息类型多了就很难维护。所以本人就对socket.io.js进行了应用层的封装。命名为giraffe.js,giraffe的含义是长颈鹿,意为能够望的远。


源码:https://github.com/baixuexiyang/Giraffe      欢迎fork和star


使用:



giraffe.js同时支持AMD和CMD以及node.js环境的使用,针对不同环境的引用如下:


node.js


npm install socket-giraffe

requireJs


1

2

3

define(["giraffe"], function() {      

    // your code      

});

seaJs


1

seaJs.use('giraffe');

web client


1

<script src="giraffe.min.js"></script>

例子:


 

定义了两种方法,一种是通过方法进行回调,publish推送服务端,receive接收服务端推回来的消息,另外一种是回调直接写在方法里


// 初始化socket参数     
var Giraffe = new Giraffe({server: 'http://127.0.0.1:8080',autoReconnect: true});     
Giraffe.init(function (re) {     
    if (re) {     
        console.log('你已成功连接到消息服务器');     
    } else {     
    }     
});     
// 发布消息     
Giraffe.publish({data: 'test'}, function(re) {     
    if(re) {     
        console.log('发布消息成功!');     
    } else {     
        console.log('发布消息失败!');     
    }     
});     
// 接收消息        
Giraffe.receive(function(res) {        
    console.log('publish 返回消息:' + res);        
});         
// 直接回调   
Giraffe.publication({data: 'test'}, function(res) {   
    console.log('publication 回调:' + res);   
});


注意:



publish、receive、publication都是我自己定义的消息类型,你可以在源码的giraffe添加自己的消息类型。

相关文章
|
3天前
|
存储 前端开发 JavaScript
前端框架与库 - React基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
|
1天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
2天前
|
前端开发 JavaScript 开发者
前端框架与库 - React生命周期与Hooks
【7月更文挑战第13天】React 框架革新UI构建,引入Hooks简化组件状态管理和副作用处理。组件生命周期涉及挂载、更新、卸载,对应不同方法,如`componentDidMount`、`shouldComponentUpdate`等,但现在推荐使用`useState`和`useEffect` Hooks。`useEffect`处理副作用,需注意清理和依赖数组。避免问题的关键在于正确使用Hooks和理解其工作模式,以构建高效应用。
|
23天前
|
前端开发 搜索推荐 JavaScript
Web前端网站(二)- 主页
页面星空是可动的哦~~~毒药水特效的颜色搭配,文字渐变的动态效果,图片360度旋转展示特效等等等;每一次的按钮点击都是满满的惊艳 ~ ~ ~
28 4
Web前端网站(二)- 主页
|
24天前
|
存储 前端开发 搜索推荐
Web前端网站(一) - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合,在登录表单的旁边还有五个白色光圈以不规则的方式环绕,当鼠标靠近时,会发出彩色的光芒~~~
36 1
Web前端网站(一) - 登录页面及账号密码验证
|
7天前
|
前端开发 JavaScript API
现代前端开发中的Web组件化设计与实践
在现代前端开发中,Web组件化已经成为了一个关键的设计思想和实践方法。本文探讨了Web组件化的概念、优势以及如何在实际项目中进行设计和应用。通过分析实例和最佳实践,展示了如何利用组件化开发提升前端开发效率和代码可维护性,同时也解决了在大型项目中常见的代码重用和团队协作问题。
|
22天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
13天前
|
监控 JavaScript 前端开发
前端 JS 经典:Web 性能指标
前端 JS 经典:Web 性能指标
12 1
|
19天前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
34 6
|
21天前
|
缓存 前端开发 安全
探索现代Web开发中的前端架构模式
【6月更文挑战第23天】随着互联网技术的飞速发展,前端架构在Web开发中扮演着越来越重要的角色。本文将深入探讨现代Web开发中使用的几种主流前端架构模式,包括单页面应用(SPA)、微前端架构和JAMStack等,并分析它们的优势与应用场景。通过实例演示,我们将看到如何根据项目需求选择合适的前端架构,以及如何利用这些架构模式提升开发效率和应用性能。