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

相关文章
|
13天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
27 3
|
10天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
14天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
29 3
|
14天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
16 3
|
14天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
32 2
|
15天前
|
开发框架 前端开发 JavaScript
Web前端框架
Web前端框架等名词
15 2
|
15天前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
32 0
|
28天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
118 2
|
28天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
36 0
|
28天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。

热门文章

最新文章