title: How to retrieve data once a message is received by webSocket in C#
body: <p>I'm now facing a problem and here's what I want:</p>
  
  <ol>
  <li>After page is load, show a blank gridPanel implemented by EXT.NET</li>
  <li>Press a button named "Update" and then connect to WebSocket Server</li>
  <li>Once receive message from WebSocket server, retrieve list type data and display it on the gridPanel.</li>
  <li>The websocket client function and display data on gridPanel should be realized by C#</li>
  </ol>
  
  <p>What I have achieved:    </p>
  
  <ol>
  <li>Show a blank gridPanel</li>
  <li>Connect to Websocket server after "Update" button is clicked</li>
  </ol>
  
  <p>The problem is:<br>
  I can connect and send message to websocket server, and can receive message from websocket server. Also, I can retrieve data after receiving data inside the "ws.OnMessage{}" function. However, the received data cannot be shown on the EXT.NET gridPanel. Is there any solution to this problem?</p>
  
  <p>The package i used for websocket client is "websocket-sharp/", and use "Fleck" as websocket server. (I just implement the client.) Below is my code:</p>
  
  <p>--------------.cs file--------------</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Data;
  using System.Xml;
  using System.Xml.Xsl;
  using WebSocketSharp;
  using Ext.Net;
  
  namespace WebApplication1
  {
      public partial class ProblemExample : System.Web.UI.Page
      {    
          protected void Page_Load(object sender, EventArgs e)
          {
  
          }    
          WebSocket ws;
  
          static DataTable ConvertToDatatable(List&lt;PcsInfo&gt; list)
          {
              DataTable dt = new DataTable();
  
              dt.Columns.Add("TestCode");
              dt.Columns.Add("TestTime");
  
              foreach (var item in list)
              {
                  var row = dt.NewRow();
                  row["TestCode"] = item.TestCode;
                  row["TestTime"] = item.TestTime;
                  dt.Rows.Add(row);
              }
              return dt;
          }
  
          //----------------------------------------------------------------------------
          //----When the "Update" button is pressed, call Store1_RefreshData function---
          //----------------------------------------------------------------------------
          protected void Store1_RefreshData(object sender, DirectEventArgs e)
          {
              //retrieveData();
              ws = new WebSocket("ws://localhost:8181/");
              ws.Connect();
              ws.OnOpen += (senderWS, eWS) =&gt; { };
  
              ws.OnMessage += (senderWS, eWS) =&gt;
              {                
                  if (eWS.Type == Opcode.Text)
                  {
                      retrieveData(); 
                  }
              };
          }
          public void retrieveData()
          {
              List&lt;PcsInfo&gt; list = new List&lt;PcsInfo&gt;();
              list.Add(new PcsInfo { TestCode = "123", TestTime = "456" });
  
              this.Store1.DataSource = ConvertToDatatable(list);
              this.Store1.DataBind();
          }
  
          public class PcsInfo
          {
              public string TestCode;
              public string TestTime;
          }
      }
  }
  </code></pre>
  
  <p>--------------.aspx file--------------</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProblemExample.aspx.cs" Inherits="WebApplication1.ProblemExample" %&gt;
  &lt;%@ Import Namespace="System.Xml.Xsl" %&gt;
  &lt;%@ Import Namespace="System.Xml" %&gt;
  &lt;%@ Import Namespace="System.Collections.Generic" %&gt;
  &lt;%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  </code></pre>
  
  <p>
  
      
      
      
      
      
      </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var submitValue = function (grid, hiddenFormat, format) {
          hiddenFormat.setValue(format);
          console.log("format=" + format);
          grid.submitData(false);
      };
  
      var template = '&lt;span style="color:{0};"&gt;{1}&lt;/span&gt;';
  
      var change = function (value) {
          return String.format(template, (value &gt; 0) ? "green" : "red", value);
      };
  
      var pctChange = function (value) {
          return String.format(template, (value &gt; 0) ? "green" : "red", value + "%");
      };
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;ext:ResourceManager ID="ResourceManager1" runat="server" /&gt;
      &lt;form id="Form1" runat="server"&gt;
      &lt;ext:Hidden ID="FormatType" runat="server" /&gt;
      &lt;ext:GridPanel 
      ID="GridPanel1"
      runat="server" 
      StripeRows="true"
      Title="Fault log" 
      TrackMouseOver="true"
      Width="800" 
      Height="800"
      AutoWidth="True" ForceLayout="True" ForceValidation="True"&gt;
      &lt;Store&gt;
          &lt;ext:Store 
              ID="Store1" 
              runat="server"
  
              &gt;
              &lt;DirectEventConfig IsUpload="true" /&gt;
              &lt;Reader&gt;
                  &lt;ext:JsonReader&gt;
                      &lt;Fields&gt;
                          &lt;ext:RecordField Name="TestCode" Type="String"/&gt;
                          &lt;ext:RecordField Name="TestTime" Type="String" /&gt;
                      &lt;/Fields&gt;
                  &lt;/ext:JsonReader&gt;
              &lt;/Reader&gt;
          &lt;/ext:Store&gt;
      &lt;/Store&gt;
      &lt;TopBar&gt;
          &lt;ext:Toolbar ID="Toolbar1" runat="server"&gt;
              &lt;Items&gt;
                  &lt;ext:ToolbarFill ID="ToolbarFill1" runat="server" /&gt;
                  &lt;ext:Button ID="btn_Update_ext" runat="server" Text="Update" Icon="Reload"&gt;
                      &lt;DirectEvents&gt;
                          &lt;Click OnEvent="Store1_RefreshData"&gt;&lt;/Click&gt;
                      &lt;/DirectEvents&gt;
                  &lt;/ext:Button&gt;
              &lt;/Items&gt;
          &lt;/ext:Toolbar&gt;
      &lt;/TopBar&gt;
      &lt;ColumnModel ID="ColumnModel1" runat="server"&gt;
          &lt;Columns&gt;
              &lt;ext:Column ColumnID="TestCode" Header="TestCode" DataIndex="TestCode" /&gt;
              &lt;ext:Column ColumnID="TestTime" Header="TestTime" DataIndex="TestTime" Width="200px" /&gt;
          &lt;/Columns&gt;
      &lt;/ColumnModel&gt;
      &lt;SelectionModel&gt;
          &lt;ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" /&gt;
      &lt;/SelectionModel&gt;
  &lt;/ext:GridPanel&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>To conclude, my question occurs on the "Store1_RefreshData()" method. When executing with websocket, the retrieveData() method cannot bind data to Store1. But, if i mark all other codes except the "retrieveData()" in "Store1_RefreshData()" method, it works fine.</p>
  
  <p>Could anyone help solve this problem? Thank you!!</p>