How to use values coming in ws.onmessage event into another function

Question

I am working on web socket related project.In following snippet I am getting the data coming from the server. I want to use the this data(in str variable) into another function. Kindly suggest any solution. Thank you in advance.

/*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

Do you mean something like this?

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;