Как использовать значения, входящие в событие ws.onmessage, в другую функцию

Question

Я работаю над проектом, связанным с веб-сокетом. В следующем фрагменте я получаю данные, поступающие с сервера. Я хочу использовать эти данные (в переменной 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;