如何使用ws中的值.Onmessage事件转换为另一个函数

Question

我正在从事web套接字相关项目。在下面的代码片段中，我从服务器获取数据。我想使用这个数据(在str变量)到另一个函数。请建议任何解决方案。提前谢谢你。

/*ON RECEIVING MESSAGES VIA WEBSOCKET FROM THE SERVER***/
ws.onmessage = function (event) {
  var mySpan = document.getElementById("messageGoesHere");
  var mySpan2 = document.getElementById("messageGoesHere2");
  var str = event.data;
  var array = str.split('|');
  mySpan.innerHTML = parseInt(array[2])
  mySpan2.innerHTML = parseInt(array[3]);
};
$(function () {
  //Here I want to print the data 
  // and I can easily use this data to my chart
  var areaChartData = {
    //labels: ["January", "February", "March", "April", "May", "June", "July"],
    labels: ["10", "20", "30", "40", "50", "60", "100"],
    datasets: [{
      label: "Digital Goods",
      fillColor: "rgba(60,141,188,0.9)",
      strokeColor: "rgba(60,141,188,0.8)",
      pointColor: "#3b8bba",
      pointStrokeColor: "rgba(60,141,188,1)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(60,141,188,1)",
      data: [28, 48, 40, 19, 86, 27, 90]
    }]
  };
  var areaChartOptions = {
    showScale: true,
    scaleShowGridLines: false,
    //String - Colour of the grid lines
    scaleGridLineColor: "rgba(0,0,0,.05)",
    //Number - Width of the grid lines
    scaleGridLineWidth: 1,
    //Boolean - Whether to show horizontal lines (except X axis)
    scaleShowHorizontalLines: true,
    //Boolean - Whether to show vertical lines (except Y axis)
    scaleShowVerticalLines: true,
    //Boolean - Whether the line is curved between points
    bezierCurve: true,
    //Number - Tension of the bezier curve between points
    bezierCurveTension: 0.3,
    //Boolean - Whether to show a dot for each point
    pointDot: false,
    //Number - Radius of each point dot in pixels
    pointDotRadius: 4,
    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth: 1,
    //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
    pointHitDetectionRadius: 20,
    //Boolean - Whether to show a stroke for datasets
    datasetStroke: true,
    //Number - Pixel width of dataset stroke
    datasetStrokeWidth: 2,
    //Boolean - Whether to fill the dataset with a color
    datasetFill: true,
    //String - A legend template
    legendTemplate: "<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
    //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
    maintainAspectRatio: true,
    //Boolean - whether to make the chart responsive to window resizing
    responsive: true
  };
  //-------------
  //- LINE CHART -
  //--------------
  var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
  alert(lineChartCanvas);
  var lineChart = new Chart(lineChartCanvas);
  var lineChartOptions = areaChartOptions;
  lineChartOptions.datasetFill = false;
  lineChart.Line(areaChartData, lineChartOptions);
});

Answer 1

你的意思是这样吗?

var mySpan  = document.getElementById("messageGoesHere");
var mySpan2 = document.getElementById("messageGoesHere2");
function myCallback(event) {
    var str = event.data;
    var array = str.split('|');
    mySpan.innerHTML = parseInt(array[2])
    mySpan2.innerHTML = parseInt(array[3]);
};
/*ON RECEIVING MESSAGES VIA WEBSOCKET FROM THE SERVER***/
ws.onmessage = myCallback;