从html5 websocket在viewModel knockoutjs中设置数据

我正在尝试创建knockout.js组件，该组件从HTML5WebSocket获取数据。Websocket代码在单独的脚本中，例如util.js。我能够连接套接字并从中获取数据，但不知道如何在组件的ViewModel中正确设置相应的属性

Websocket-util.js：

     var options = {
    server: '127.0.0.1',
    port: '12345'
};

var socket, loadedFlag;
var timeout = 2000;
var clearTimer = -1;
var data = {};

function handleErrors(sError, sURL, iLine)
{
    return true;
};
function getSocketState()
{
    return (socket != null) ? socket.readyState : 0;
}

function onMessage(e)
{
    data=$.parseJSON(e.data);

 // ???? Is it possible to have here something like
 // ???? viewModel.getDataWS1(data);
}

function onError()
{
    clearInterval(clearTimer);
    socket.onclose = function () {
        loadedFlag = false;
    };
    clearTimer = setInterval("connectWebSocket()", timeout);
}

function onClose()
{
    loadedFlag = false;
    clearInterval(clearTimer);
    clearTimer = setInterval("connectWebSocket()", timeout);
}

function onOpen()
{
    clearInterval(clearTimer);
    console.log("open" + getSocketState());
}

function connectWebSocket()
{

    if ("WebSocket" in window)
    {
        if (getSocketState() === 1)
        {
            socket.onopen = onOpen;
            clearInterval(clearTimer);
            console.log(getSocketState());
        }
        else
        {
            try
            {
                host = "ws://" + options.server + ":" + options.port;
                socket = new WebSocket(host);
                socket.onopen = onOpen;
                socket.onmessage = function (e) {
                    onMessage(e);
                };
                socket.onerror = onError;
                socket.onclose = onClose;
            }
            catch (exeption)
            {
                console.log(exeption);
            }
        }
    }
}

组件（productDisplay.js）-创建可在多个页面上使用的组件：

define([
    'jquery',
    'app/models/productDisplayModel',
    'knockout',
    'mapping',
    'socket'
],
        function ($, model, ko, mapping) {
            ko.components.register('product', {
                viewModel: {require: 'app/models/productModel'},
                template: {require: 'text!app/views/product.html'}
            });

        });

Product ViewModel（productModel.js）-我很难将ViewModel属性设置为websocket中的数据：

var viewModel = {};

define(['knockout', 'mapping', 'jquery'], function (ko, mapping, $) {

    function Product(name, rating) {
        this.name = name;
        this.userRating = ko.observable(rating || null);
    }

    function MyViewModel() {
        this.products = ko.observableArray(); // Start empty
    }

    MyViewModel.prototype.getDataWS1 = function () {

     //Websocket has not connected and returned data yet, so data object is empty
     // ???? Is there anyway I can add something like promise so that the value is set once socket is connected? 
        this.products(data);
    };

// apply binding on page load
    $(document).ready(function () {
        connectToServer1();
        viewModel = new MyViewModel();

        ko.applyBindings(viewModel);
        viewModel.getDataWS1();
    });

});

---

感谢您的建议。

当您收到以下方式的消息时，您可以更新一个可观察到的内容：

util.js

function onMessage(e) {
    var productData = $.parseJSON(e.data);
    viewModel.addNewProduct(productData);
}

function Product(name, rating) {
    this.name = name;
    this.userRating = ko.observable(rating || null);
}

function MyViewModel() {
    this.products = ko.observableArray(); // Start empty
}

MyViewModel.prototype.addNewProduct(product) {
  var newProduct = new Product(product.name, product.rating);
  this.products.push(newProduct);
}

productModel.js

function onMessage(e) {
    var productData = $.parseJSON(e.data);
    viewModel.addNewProduct(productData);
}

function Product(name, rating) {
    this.name = name;
    this.userRating = ko.observable(rating || null);
}

function MyViewModel() {
    this.products = ko.observableArray(); // Start empty
}

MyViewModel.prototype.addNewProduct(product) {
  var newProduct = new Product(product.name, product.rating);
  this.products.push(newProduct);
}

---

基本上，这个想法是，当您收到消息（在onMessage函数中）时，您将解析数据并调用viewmodel中的函数，以将消息数据添加到viewmodel属性（observables、observableArrays等）

是否可以使用回调？类似于connectToServer1（函数（数据）{this.products（数据）}）；我看不到您在哪里定义了connectToServer1，因此我无法向您演示如何返回回调。