我正在学习并使用rails构建emberjs应用程序.
在这个应用程序中,我希望数据被推送而不是被轮询到客户端应用程序.

For.e.g.以下片段在http://awardwinningfjords.com/2011/12/27/emberjs-collections.html

// Setup a global namespace for our code.
Twitter = Em.Application.create({

  // When everything is loaded.
  ready: function() {

    // Start polling Twitter
    setInterval(function() {
      Twitter.searchResults.refresh();
    },2000);

    // The default search is empty,let's find some cats.
    Twitter.searchResults.set("query","cats");

    // Call the superclass's `ready` method.
    this._super();
  }
});

它调查twitter API,但我的问题是如何使一个使用WebSocket连接更新其状态的EmberJS应用程序?

解决方法

您必须实现一个了解如何处理WebSockets的DS.Adapter.这是一个简单的例子:
var SOCKET      = 'ws://localhost:9090/some-websocket';

var ID          = 'uuid';

var FIND        = 'find';
var FIND_MANY   = 'findMany';
var FIND_QUERY  = 'findQuery';
var FIND_ALL    = 'findAll';

/**
* Implementation of WebSocket for DS.Store
*/
App.Store = DS.Store.extend({

    revision: 4,adapter: DS.Adapter.create({

        socket: undefined,requests: undefined,send: function(action,type,data,result) {
            /* Specific to your web socket server side implementation */
            var request = {
                "uuid": generateUuid(),"action": action,"type": type.toString().substr(1),"data": data
            };
            this.socket.send(JSON.stringify(request));
            /* So I have access to the original request upon a response from the server */
            this.get('requests')[request.uuid] = request;
            return request;
        },find: function (store,id) {
            this.send(FIND,id);
        },findMany: function (store,ids,query) {
            this.send(FIND_MANY,ids);
        },findQuery: function (store,query,modelArray) {
            this.send(FIND_QUERY,modelArray).modelArray = modelArray;
        },findAll: function (store,type) {
            this.send(FIND_ALL,type);
        },/* Also implement:
         * createRecord & createRecords
         * updateRecord & updateRecords
         * deleteRecord & deleteRecords
         * commit & rollback
         */

        init: function () {

            var context = this;

            this.set('requests',{});

            var ws = new WebSocket(SOCKET);

            ws.onopen = function () {

            };

            ws.onmessage = function(event) {
                var response = JSON.parse(event.data);
                var request = context.get('requests')[response.uuid];

                switch (request.action) {
                    case FIND:
                        App.store.load(type,response.data[0]);
                        break;
                    case FIND_MANY:
                        App.store.loadMany(type,response.data);
                        break;
                    case FIND_QUERY:
                        request.modelArray.load(response.data);
                        break;
                    case FIND_ALL:
                        App.store.loadMany(type,response.data);
                        break;
                    default:
                        throw('UnkNown Request: ' + request.action);
                }

                /* Cleanup */
                context.get('requests')[response.uuid] = undefined;
            };

            ws.onclose = function () {

            };

            this.set('socket',ws);
        }

    });
});

javascript – 如何将websocket与emberjs集成?的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  2. 利用Node实现HTML5离线存储的方法

    这篇文章主要介绍了利用Node实现HTML5离线存储的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. canvas中普通动效与粒子动效的实现代码示例

    canvas用于在网页上绘制图像、动画,可以将其理解为画布,在这个画布上构建想要的效果。本文详细的介绍了粒子特效,和普通动效进行对比,非常具有实用价值,需要的朋友可以参考下

  4. 详解如何通过H5(浏览器/WebView/其他)唤起本地app

    这篇文章主要介绍了详解如何通过H5(浏览器/WebView/其他)唤起本地app的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. H5混合开发app如何升级的方法

    本篇文章主要介绍了H5混合开发app如何升级的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  6. canvas学习和滤镜实现代码

    这篇文章主要介绍了canvas学习和滤镜实现代码,利用 canvas,前端人员可以很轻松地、进行图像处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. AmazeUI 折叠面板的实现代码

    这篇文章主要介绍了AmazeUI 折叠面板的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  8. localStorage的过期时间设置的方法详解

    这篇文章主要介绍了localStorage的过期时间设置的方法详解的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  9. 详解HTML5 data-* 自定义属性

    这篇文章主要介绍了详解HTML5 data-* 自定义属性的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. html5 http的轮询和Websocket原理

    这篇文章主要介绍了html5 http的轮询和Websocket原理的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部