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添加自己的消息类型。

相关文章
|
8天前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
|
15天前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
100 0
|
4天前
|
JavaScript 前端开发 Java
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
|
5天前
|
前端开发 JavaScript Java
Java语言在Web前端开发中的技术应用
Java语言在Web前端开发中的技术应用
|
15天前
|
前端开发 JavaScript Java
web 技术中前端和后端交互过程
客户端:上网过程中,负责浏览资源的电脑,叫客户端
26 0
|
15天前
|
前端开发
web前端作业3
web前端作业3
12 1
|
15天前
|
前端开发 安全 数据安全/隐私保护
web前端第二天
web前端第二天
8 1
|
15天前
|
前端开发
web前端的作业1
web前端的作业1
8 1
|
1天前
|
SQL 前端开发 安全
PHP在现代Web开发中的角色与挑战
【6月更文挑战第3天】本文深入探讨了PHP语言在当前Web开发领域的应用现状,分析了其在面对新兴技术时的适应力和面临的主要挑战。通过对比分析,揭示了PHP保持其流行地位的原因,并展望了其未来的发展方向。
6 1
|
4天前
|
XML JSON PHP
PHP的生命周期:从诞生到现代Web开发
【5月更文挑战第31天】探索PHP的历史演变,了解其如何塑造网络技术。本文将引导您穿越时间的长廊,见证一个编程语言如何适应不断变化的技术需求,并持续影响全球数百万开发者和用户。