title: creating an updating jqgrid table from websocket source
body: <p>I am struggling a bit with where to start, I am in the process of doing a websocket project, I have the server coded which pushes messages in realtime to a websocket client running jQuery and HTML5. I have set the server up to pass across JSON messages like the below.</p>
  
  <pre><code>{"timestamp":"2015-01-12T17:22:40.4372664+11:00","code":0012345,"parsedname":" (NAME)","priority":"AB","message":"THIS IS A TEST MESSAGE"}
  </code></pre>
  
  <p>These messages show up fine on the websocket page, but now I want to display them in a more friendly way. Whilst I am fine with vb.net this kind of programming is way out of my area and I am wondering if anyone could point me in the direction of some simple code examples which would allow me to update a table in realtime as a json message is recieved by the websocket client.</p>
  
  <p>I had a quick look on the net, but I can either find only partial examples or overly complex examples. I should clarify I am not looking for someone to do it for me, just to help me get a better understanding on how to best do it and to point me in the direction of some code samples.</p>
  
  <p>From what I can see it looks like jqgrid might be suitable, but I don't know how to bind it to a websocket, and how to go from there.</p>
  
  <p>From the demo's it looks like something like this below should work, but how do I change the source to the websockets json strings, and once done, how do I then update the table. I should clarify each new message is 1 json string.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(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"
      }); 
  }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>Many thanks,</p>
  
  <p>Thanks for the tips, I have tried the samples and combined them but having no real luck so far :(</p>
  
  <p>Travis.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Info Stream (TEST)&lt;/title&gt;
          &lt;link href="https://www.guriddo.net/demo/css/trirand/ui.jqgrid.css" rel="stylesheet"/&gt;
  &lt;link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.1/themes/start/jquery-ui.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"&gt;&lt;/script&gt;
                  &lt;script type="text/javascript"&gt;
              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 + "&lt;br/&gt;");
                      return;
                  }
  
                  appendMessage("* Connecting to server ..&lt;br/&gt;");
                  // 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&lt;br/&gt;');
                  };
  
                  // when the connection is closed, this method is called
                  ws.onclose = function () {
                      appendMessage('* Connection closed&lt;br/&gt;');
                  };
              }
  
              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"
          }); 
               };
  
      &lt;/script&gt;
      &lt;/head&gt;
  
  
      &lt;body&gt;
  &lt;table id='list'&gt;&lt;/table&gt;
  &lt;div id='pager'&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>