Question

我正在努力从哪里开始，我正在做一个websocket项目，我有服务器编码，它实时将消息推送到运行jQuery和HTML5的websocket客户端。我已将服务器设置为传递JSON消息，如下所示。

{"timestamp":"2015-01-12T17:22:40.4372664+11:00","code":0012345,"parsedname":" (NAME)","priority":"AB","message":"THIS IS A TEST MESSAGE"}

这些消息在websocket页面上显示正常，但现在我想以更友好的方式显示它们。虽然我对vb.net很好，但这种编程方式超出了我的领域，我想知道是否有人可以指向一些简单的代码示例的方向，这将允许我实时更新表格，因为json消息是由websocket客户收到。

我在网上快速查看，但我可以找到仅部分示例或过于复杂的示例。我应该澄清一点，我不是在寻找有人为我做这件事，只是为了帮助我更好地理解如何做到最好，并指出我的一些代码样本。

从我可以看到它看起来像jqgrid可能是合适的，但我不知道如何将它绑定到websocket，以及如何从那里开始。

从演示中看起来像下面这样的东西应该可以工作，但是如何将源更改为websockets json字符串，一旦完成，我该如何更新表。我应该澄清每条新消息是1个json字符串。

<script type="text/javascript">
$(function () {
    $("#list").jqGrid({
        url: "example.php",
        datatype: "xml",
        mtype: "GET",
        colNames: ["timestamp", "code", "name", "message"],
        colModel: [
            { name: "timestamp", width: 55 },
            { name: "code", width: 90 },
            { name: "name", width: 80, align: "right" },
            { name: "message", width: 80, align: "right" }
        ],
        pager: "#pager",
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: "invid",
        sortorder: "desc",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        caption: "My first grid"
    }); 
}); 
</script>

非常感谢，

感谢您的提示，我已经尝试了样本并将它们合并但到目前为止没有真正的运气:(

特拉维斯。

代码：

<html>
    <head>
        <title>Info Stream (TEST)</title>
        <link href="https://www.guriddo.net/demo/css/trirand/ui.jqgrid.css" rel="stylesheet"/>
<link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.1/themes/start/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"></script>
<script src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"></script>
                <script type="text/javascript">
            var noSupportMessage = "Your browser cannot support WebSocket!";
            var ws;

            function appendMessage(message) {
                $('body').append(message);
            }

            function connectSocketServer() {
                var support = "MozWebSocket" in window ? 'MozWebSocket' : ("WebSocket" in window ? 'WebSocket' : null);

                if (support === null) {
                    appendMessage("* " + noSupportMessage + "<br/>");
                    return;
                }

                appendMessage("* Connecting to server ..<br/>");
                // create a new websocket and connect
                ws = new window[support]('ws://address.com:2012/');

                // when data is comming from the server, this metod is called
                ws.onmessage = function (evt) {
                    makegrid(evt.data);
                };

                // when the connection is established, this method is called
                ws.onopen = function () {
                    appendMessage('* Connection open<br/>');
                };

                // when the connection is closed, this method is called
                ws.onclose = function () {
                    appendMessage('* Connection closed<br/>');
                };
            }

            function disconnectWebSocket() {
                if (ws) {
                    ws.close();
                }
            }

            function connectWebSocket() {
                connectSocketServer();
            }



            window.onload = function () {
  connectWebSocket();
  };

  function makeGrid(data){
    var json = [data]; // now this is local data
     $("#list").jqGrid({
            datastr: data, // so you should use datastr instead of url with localdata
            datatype: "jsonstring", // and dataype should be jsonstring with local data
            colNames: ["timestamp", "capcode", "parsedname", "message"],
            colModel: [
                { name: "timestamp", width: 400 },
                { name: "capcode", width: 200 },
                { name: "parsedname", width: 200, align: "right" },
                { name: "message", width: 200, align: "right" }
            ],
            pager: "#pager",
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: "invid",
            sortorder: "desc",
            viewrecords: true,
            gridview: true,
            autoencode: true,
            caption: "Pager Messages"
        }); 
             };

    </script>
    </head>


    <body>
<table id='list'></table>
<div id='pager'></div>
    </body>
</html>

Answer 1

您的数据类型应为json

datatype: "json"

其他一切看起来都不错。

Answer 2

试试这是一个带有json的示例演示，js对象应该在[]中：

var data = [{"timestamp":"2015-01-12T17:22:40.4372664+11:00","code":0012345,"parsedname":" (NAME)","priority":"AB","message":"THIS IS A TEST MESSAGE"}];
    $(function () {
        $("#list").jqGrid({
            datastr: data,
            datatype: "jsonstring",
            mtype: "GET",
            colNames: ["timestamp", "code", "name", "message"],
            colModel: [
                { name: "timestamp", width: 400 },
                { name: "code", width: 200 },
                { name: "name", width: 200, align: "right" },
                { name: "message", width: 200, align: "right" }
            ],
            pager: "#pager",
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: "invid",
            sortorder: "desc",
            viewrecords: true,
            gridview: true,
            autoencode: true,
            caption: "My first grid"
        }); 
    });

<link href="https://www.guriddo.net/demo/css/trirand/ui.jqgrid.css" rel="stylesheet"/>
<link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.1/themes/start/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"></script>
<script src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"></script>



<table id='list'></table>
<div id='pager'></div>

另一种方法是，你可以有一个jquery ajax调用来获取你得到的对象并将该对象推送到数组中并将数组传递给jqgrid，如下所示：

$.getJSON('example.php', function(data){
    makeGrid(data);
});

和您的函数makeGrid()：

function makeGrid(data){
    var json = [data]; // now this is local data

     $("#list").jqGrid({
            datastr: data, // so you should use datastr instead of url with localdata
            datatype: "jsonstring", // and dataype should be jsonstring with local data
           ....
     });
}

从websocket源创建更新jqgrid表

2 个答案: