i need some help for extract data from response socket. Precisely the output of the Trace() in the onResponse function.
var socket:Socket = new Socket();
var codehtml:String = "test";
function onConnect(e:Event):void {
socket.writeUTFBytes("GET / HTTP/1.1\n");
socket.writeUTFBytes("Host: 192.168.1.2\n");
socket.writeUTFBytes("\n");
}
function onResponse(e:ProgressEvent):void {
if (socket.bytesAvailable>0) {
var tmpcode:String = socket.readUTFBytes(socket.bytesAvailable);
trace(tmpcode);
}
}
socket.addEventListener(Event.CONNECT, onConnect);
socket.addEventListener(Event.CLOSE, onClose);
socket.addEventListener(IOErrorEvent.IO_ERROR, onError);
socket.addEventListener(ProgressEvent.SOCKET_DATA, onResponse);
socket.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecError);
socket.connect("www.google.fr", 80);
The problem with sockets is that the information can be too big for a single packet. So you can receive half of the message, and then receive the rest of it.
Commonly this is handled with a 'EOF' (end of file) delimiter - a single special character that will match the ending of the message. For example you can receive those two packets:
<start><body>some text
</body></start>$
This should be a regular xml data, but you won't be able to get it from the first packet only. So you need to wait for everything to come. But how can you know that it happened? By waiting for this special $ sign.
This is needed because sometimes the info is not enough to be casted to something readable. Here's a simple solution:
const EOL_DELIMITER:String = '$';
var _buffer:String = "";
_socket.addEventListener(ProgressEvent.SOCKET_DATA, onSocketData);
function onSocketData(event:ProgressEvent):void
{
var data:String = _socket.readUTFBytes(_socket.bytesAvailable);
_buffer += data; // add everything to a buffer that will store all info until now
var msg:String;
var index:int;
// this will search for the delimeter
// as long as there is one - there is a message
// it's in a loop as there might be several messages in one packet
// if there is no message, this loop will fail and only the buffer will get filled
while((index = _buffer.indexOf(EOL_DELIMITER)) > -1)
{
msg = _buffer.substring(0, index);
_buffer = _buffer.substring(index + 1); // clear the message from the buffer
// new message has arrived -> msg var
}
}
Hope that helps!
Related
I record audio via getUserMedia and mediarecorder:
...
navigator.mediaDevices.getUserMedia(constraints).then(mediaStream => {
try {
const mediaRecorder = new MediaRecorder(mediaStream);
mediaRecorder.ondataavailable = vm.mediaDataAvailable;
mediaRecorder.start(1000);
...
When I receive the chucks in the callback, I send them to a web api via websockets, which simply writes the parts one after another to a file:
mediaDataAvailable(e) {
if (!event.data || event.data.size === 0)
{
return;
}
vm.websocket.SendBlob(e.data);
...
The file, which is created on the webserver side in the webapi (lets call it "server.webm"), does not work correct. More exactly: It plays the first n seconds (n is the time I chose for the start command), the it stops. This means, the first chunk is transferred correctly, but it seams that adding the 2nd, 3rd, ... chuck together to a file does not work. If I push the chuncks in the web page on an array and the to a file, the resulting file (lets call it "client.webm") is working the whole recording duration.
Creating file on web client side:
mediaDataAvailable(e) {
if (!event.data || event.data.size === 0)
{
return;
}
vm.chuncks.push(e.data);
...
stopCapturing() {
var blob = new Blob(this.chuncks, {type: 'audio/webm'});
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'client.webm';
document.body.appendChild(a);
a.click();
I compared the files client.webm and server.webm. They are quite similar, but there are certain parts in the server.webm which are not in the client.webm.
Anybody any ideas? Server code looks like the following:
private async Task Echo( HttpContext con, WebSocket webSocket)
{
System.IO.BinaryWriter Writer = new System.IO.BinaryWriter(System.IO.File.OpenWrite(#"server.webm"));
var buffer = new byte[1024 * 4];
WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
while (!result.CloseStatus.HasValue)
{
Writer.Write(buffer);
Writer.Flush();
await webSocket.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count), result.MessageType, result.EndOfMessage, CancellationToken.None);
result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
}
await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
Writer.Close();
}
resolved, I write all bytes of the reserved byte array to file in server code, not the count of received bytes.
Am now using websocket in HTML5 to build my web app.
Because my previous work was based on TCP and I used CRC16 algorithm to wrap the content that will transfer to server side;
Construct message with CRC16 code below:
public static byte[] ConstructMessageWithCRC(string message)
{
//Message with a |
var messageToConstruct = message + "|";
//calculate CRC value
var crcCode = CRC16.CalculateCrc16(messageToConstruct);
var crcCodeShort = ushort.Parse(crcCode);
//CRC high value
var crcHigh = byte.Parse((crcCodeShort / 256).ToString());
//CRC low value
var crcLow = byte.Parse((crcCodeShort % 256).ToString());
var messageBytes = Encoding.Default.GetBytes(messageToConstruct);
var messageLength = messageBytes.Length;
var messageBytesWithCRC = new byte[messageLength + 2];
Array.Copy(messageBytes, 0, messageBytesWithCRC, 0, messageLength);
//append crc value to the message
messageBytesWithCRC[messageLength] = crcHigh;
messageBytesWithCRC[messageLength + 1] = crcLow;
return messageBytesWithCRC;
}
After server side received the data, it will calculate the content via CRC16 algorithm also to ensure that the data is correct.
Check CRC code below:
public static bool CheckMessageCRC(byte[] message, out string messageReceived)
{
//message length that received
var messageLength = message.Length;
//message received without crc value
var messageReceivedStrBytes = new byte[messageLength - 2];
Array.Copy(message, 0, messageReceivedStrBytes, 0, messageLength - 2);
//crc value received
var messageReceivedCrcBytes = new byte[2];
Array.Copy(message, messageLength - 2, messageReceivedCrcBytes, 0, 2);
//get the received message with correct decoding
var messageCalculatedString = Encoding.Default.GetString(messageReceivedStrBytes);
messageReceived = messageCalculatedString;
//get the received crc value
var currentCRC = byte.Parse(messageReceivedCrcBytes[0].ToString()) * 256 + byte.Parse(messageReceivedCrcBytes[1].ToString());
//crc value recalculate
var result = ushort.Parse(CRC16.CalculateCrc16(messageCalculatedString));
//comparison
if (currentCRC == result)
return true;
return false;
}
From above code, you can see what I did.
But in some articles that using websocket: Working with Websockets, it will use below code to handle the message directly:
//When the server is sending data to this socket, this method is called
ws.onmessage = function (evt) {
//Received data is a string; We parse it to a JSON object using jQuery
//http://api.jquery.com/jQuery.parseJSON/
var jsonObject = $.parseJSON(evt.data);
//Do something with the JSON object
};
//Creates an object that will be sent to the server
var myObject = {
Property: "Value",
AnotherProperty: "AnotherValue"
};
//We need to stringify it through JSON before sending it to the server
ws.send(JSON.stringify(myJsonObject));
It will directly send the data out without any check mechanism with the data. So if the data is intercepted by others and we won't know the data has been changed. Also, because of poor network, the data will arrival out of order, then below code won't work correctly, maybe we wanted data as ABC, but we got BCA:
var jsonObject = $.parseJSON(evt.data);
So for evt.data, just wonder how should we check the data transfer complete, data order correct, data content correct and so on.
I have googled a lot and didn't see any info regarding this, just want use this question to declare the right way to transfer data via websocket, thx.
EDIT:
My friend send me this: https://www.rfc-editor.org/rfc/rfc6455, in section 5.2
I think the protocol seems do this work already. Need more of your discusses on it. thx
The situation
I have a scanner that has been working with a compiled application which I don't have the source. It still works and can be tested to make sure the scanner is working. I need to convert the data entry process to my web based system.
So I'm building a chrome app that read serial port information incoming from the com port. I first tried setting it up with a com port emulator and a virtual null modem. This allowed me to test the connection and the receive data. I can't find why I am receiving only 1 byte.
The problem
When I connected to the actual scanner, I am able to connect without any issue, but when I receive the dataArray it's only one byte long. After reveiving the first data, I'm unable to receive any other data until I restart the connection.
The Code
var connectionId = -1;
var e_dtr, e_rts, e_dcd, e_cts, e_ri, e_dsr;
var dtr, rts;
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.serial.getDevices(function(objs,arg2){
chrome.serial.connect(objs[0].path, {ctsFlowControl:true}, onConnect)
});
});
chrome.serial.onReceive.addListener(function(info){
chrome.serial.getInfo(info.connectionId, output);
var uint8View = new Uint8Array(info.data);
var value = String.fromCharCode.apply(null, uint8View);
console.log(value);
});
chrome.serial.onReceiveError.addListener(function(info){
var uint8View = new Uint8Array(info.data);
var value = String.fromCharCode.apply(null, uint8View);
console.log(value);
});
function readSignals() {
chrome.serial.getControlSignals(connectionId,onGetControlSignals);
}
function onSetControlSignals(result) {
console.log("onSetControlSignals: " + result);
};
function changeSignals() {
chrome.serial.setControlSignals(connectionId, { dtr: dtr, rts: rts }, onSetControlSignals);
}
function onGetControlSignals(signals) {
console.log(signals);
}
function onConnect(connectionInfo) {
console.log(connectionInfo);
if (!connectionInfo) {
console.log('Could not open');
return;
}
connectionId = connectionInfo.connectionId;
console.log('Connected');
dtr = false;
rts = false;
changeSignals();
setInterval(readSignals, 1000);
};
I am currently exploring possible methods to handle application-wide exceptions in AngularJS.
One of the things we really wanted to avoid was wrapping multiple parts of the application in nested try/catch blocks, but handle things cleanly - i.e throw an exception in response to a promise.
Has anyone covered this issue before and have any recommendations?
Any suggestions on how to pick up exceptions in services as well as controllers/directives. (See below - broadcast works ok, but only if you can attach a listener to a scope).
Progress so far
A few short design goals:
Allow exceptions from one part of the application to be handled elsewhere - or possibly multiple places (i.e. 'display error notification to user', 'disable widget').
Provide central management of common error conditions - i.e. log to server, display notification to user, redirect to login.
Allow exceptions to be thrown from controllers, directives, services etc.
Eventually allow localized messages.
The current leaning of my team is to write a service to handle exceptions, which would expose a range of simple calls:
exceptionService.warn('exception_token');
exceptionService.crit('another_exception_token');
This service would then format an 'exception' object and broadcast this from the rootscope. This would allow a default handler to watch for any broadcasts and apply default actions, as well as allow custom listeners to be set in others scopes, which could handle more specific conditions - i.e. disable a part of the UI.
var exception = {
token: 'exception_token',
severity': 'crit'
};
// broadcast exception
$rootScope.$broadcast(
'application_exception',
exception
);
I was thinking about the same recently, and it occurred to me that when it comes to a good error handling in javascript, it is irrelevant which framework you are using, Angular on something else. I wrote one such error handler recently for an AngularJS project, but I did it in a way it can be used in any framework.
Here's the complete code. You can either use it directly, or modify to your needs...
/*
Factory errorFact is to simplify error handling and reporting in other objects.
It supports detailed error output as a text string and into the browser's console.
Usage example:
A function that supports return of an error object would have the following declaration
as its very first line:
var e = errorFact.create("objectName.funcName", arguments);
- in this declaration we specify the full object + method name as the first string parameter,
- and as the second parameter we pass javascript's reserved variable called arguments, which
provides reference to all of the function's parameters for logging.
When an error occurs, the function would return:
return e.error("Error description text");
- this line will create and return a complete error context.
When a function that supports return of an error object makes a call into another
function that also supports the error context, then it can return the nested error
result by passing the embedded error to the current error object instead of the error
text.
Example:
var e = errorFact.create("objectName.funcName", arguments);
var data = callAnotherFunc(...); // calling a function that support an error object;
if(data.isError){ // If an error was triggered;
return e.error(data); // return that error from the current context;
}
The top-level code that calls an error-returning function would do verification
and if an error occurred, log all its details into console (typically).
Example:
var data = getData(...);
if(data.isError){
data.log(); // Output all the error details into the browser's console;
}
*/
"use strict";
app.factory("errorFact", function(){
return {
// creates a new error context;
create: function(method, args){
var result = {
// initiates and returns the error context;
error: function(msg){
this.info.isError = true;
if(msg.isError){
this.info.details.caller = msg;
}else{
this.info.details.msg = msg;
}
return this.info;
},
info:
{
isError: false,
details: {},
log: function(){
if(this.isError){
console.error(this.format());
}
},
// formats complete error details into a text string;
format: function(){
if(this.details.caller){
var txt = this.details.caller.format();
txt += "\nCALLER: " + this.details.method + "(" + this.formatArguments() + ")";
return txt;
}
if(this.details.method){
return "Error calling " + this.details.method + "(" + this.formatArguments() + "): " + this.details.msg;
}else{
return this.details.msg;
}
return "";
},
// formats function argument details into a text string;
formatArguments: function(){
if(!this.details.args){
return "";
}
var params = "";
for(var i = 0;i < this.details.args.length;i ++){
if(params.length > 0){
params += ",";
}
var p = this.details.args[i];
if(p === undefined){
params += "undefined";
}else{
if(p === null){
params += "null";
}else{
if(typeof(p) == "object"){
params += "Object";
}else{
params += p;
}
}
}
}
return params;
}
}
};
if(method){
result.info.details.method = method;
}
if(args){
result.info.details.args = args;
}
return result;
}
}
});
Below is a factory that shows how it is used:
"use strict";
app.factory('moduleFact', ['errorFact', function(errorFact){
return {
// Locates existing module and expands its key Id references
// into corresponding object references:
// - If 'hintGroupId' is present, property 'hints' is added from
// the corresponding hint group.
// - If 'repModules' is present, properties 'question' and 'refs'
// are added.
// On success, return the expanded module object.
// On failure, returns an error object.
//
// NOTE: Currently supports only the first value in repModules.
expandModule: function(moduleData, moduleId){
var e = errorFact.create("moduleFact.expandModule", arguments);
if(!moduleData || !moduleData.modules || !moduleId){
return e.error("Invalid parameters passed");
}
var mod = this.findModule(moduleData, moduleId);
if(mod.isError){
return e.error(mod);
}
var src = mod;
if(mod.repModules){
var repId = mod.repModules[0];
if(!repId){
return e.error("Invalid repModules encountered");
}
///////////////////////////////////////
// temporary check to throw a warning:
if(mod.repModules.length > 1){
console.warn("Multiple values in property repModules: " + JSON.stringify(mod.repModules) +
", which is not supported yet (only the first value is used)");
}
///////////////////////////////////////
src = this.findModule(moduleData, repId);
if(src.isError){
return e.error(src);
}
}
if(src.question){
mod.question = src.question;
}else{
return e.error("Question not specified");
}
if(src.refs){
mod.refs = src.refs;
}
if(src.hintGroupId){
var hg = this.findHintGroup(moduleData, src.hintGroupId);
if(hg.isError){
return e.error(hg);
}
mod.hints = hg.hints;
}
return mod; // needed extra: expand attribute repModules
},
// Expands all the modules and returns the data;
expandAllModules: function(moduleData){
var e = errorFact.create("moduleFact.expandAllModules", arguments);
if(!moduleData || !moduleData.modules){
return e.error("Invalid parameters passed");
}
for(var i = 0;i < moduleData.modules.length;i ++){
var result = this.expandModule(moduleData, moduleData.modules[i].id);
if(result.isError){
return e.error(result);
}
}
return moduleData;
},
// Locates and returns module by its Id;
findModule: function(moduleData, moduleId){
var e = errorFact.create("moduleFact.findModule", arguments);
if(!moduleData || !moduleData.modules || !moduleId){
return e.error("Invalid parameters passed");
}
for(var i = 0;i < moduleData.modules.length;i ++){
if(moduleData.modules[i].id == moduleId){
return moduleData.modules[i];
}
}
return e.error("Module with Id = " + moduleId + " not found");
},
// Locates and returns Hint Group by its Id;
findHintGroup: function(moduleData, hintGroupId){
var e = errorFact.create("moduleFact.findHintGroup", arguments);
if(!moduleData || !moduleData.hintGroups || !hintGroupId){
return e.error("Invalid parameters passed");
}
for(var i = 0;i < moduleData.hintGroups.length;i ++){
if(moduleData.hintGroups[i].id == hintGroupId){
return moduleData.hintGroups[i];
}
}
return e.error("Hint Group with Id = " + hintGroupId + " not found");
}
}
}]);
So, when you have such factory in place, your high-level code, such as in a controller would just log any issues as shown in the example below:
"use strict";
app.controller('standardsCtrl', ['$scope', 'moduleFact', function($scope, moduleFact){
var data = ...//getting data;
var mod = moduleFact.expandAllModules(data);
if(mod.isError){
mod.log(); // log all error details into the console;
}else{
// use the data
}
});
}]);
You can override the $exceptionHandler in order to pass the exceptions to your own central service for exceptions, but the $exceptionHandler seems to only receive the exceptions thrown from your controllers, directives, etc... but not for the exceptions originated from ajax calls. For those exceptions you can implement an interceptor like the one described in this page:
EDITED: Link is dead permanently.
Archive.org link
whats your opinion to create a centralized error handling function for your app
so whenever an error happened with your frontend tear (angular, API calls,...) it executed, so no need to write your error handling every time
so here is my code
(function () {
'use strict';
angular
.module('app')
.factory('$exceptionHandler', ExceptionHandler);
ExceptionHandler.$inject = ['$injector']; //for minification
function ExceptionHandler($injector) {
var $log, sweetAlert, $translate;
return function exceptionHandler(exception, cause) {
// Add DI here to prevent circular dependency
$log = $log || $injector.get('$log');
sweetAlert = sweetAlert || $injector.get('sweetAlert'); //19degrees.ngSweetAlert2
$translate = $translate || $injector.get('$translate');
// $loggerService = $loggerService || $injector.get('$loggerService');
var title, message;
title = $translate.instant('General error title');
message = $translate.instant('General error message', { exceptionMessage: exception.message });
sweetAlert.error(title, message);
$log.error(exception, cause);
// loggerService.logErrorsToBackend(exception, cause);
};
}
})();
I'm not sure if this approach considered to be a best practice but hope it helps you.
Below code is used to read a file in the disk and upload as 1MB chunks to a php server via adobe AIR application. It iterates the do/while loop till the end of the file and uploading part is handled by function getConnection. The servers returns an XML as the response. With the eventListeners currently it goes to function onRequestComplete when it receives the response. Because of that issue current code exits the loop when it receives the response from the server. Is there any way that I can get the response of the request send by the function getConnection when it calling inside function startUpload ? also how can I define the request timeout for this single requests?
private function startUpload():void {
var localFilePath:String =localFilesToUpload[currentUploadedVideoIndex].file.nativePath;
var filePathArray = localFilePath.split("/");
var uploadedFile:File = new File(localFilePath);
var fileSize:Number = uploadedFile.size;
var fileName:String = filePathArray[filePathArray.length-1];
var fileId:String = "10";
var index:Number=0;
var chunkSize:Number=1024*1204;
var size:Number=chunkSize;
var serverPath:String = "http://myurl/rests";
//encode username and password
var userName:String="myusername";
var password:String="mypassword";
var encoder:Base64Encoder = new Base64Encoder();
encoder.insertNewLines=false;
encoder.encode(userName+":"+password);
var urlLoader:URLLoader=new URLLoader();
urlLoader.dataFormat=URLLoaderDataFormat.TEXT;
urlLoader.addEventListener(Event.COMPLETE,onRequestComplete);
urlLoader.addEventListener(IOErrorEvent.IO_ERROR,onResponceFail);
var urlRequest:URLRequest = new URLRequest(serverPath);
urlRequest.method=URLRequestMethod.POST;
do{
//if this is true file must be uploaded as a chunk
if(fileSize>chunkSize){
if((index+size)>fileSize){ // if true this is the final chunk of the file.
size = fileSize-index; // take the remaining size of the file
}
}else{
size = fileSize; //this file can be uploaded directly
}
//read the bytes from the file in the specified location
var buff:ByteArray = new ByteArray();
var uploadedFileStream:FileStream = new FileStream();
uploadedFileStream.open(uploadedFile,FileMode.READ);
uploadedFileStream.readBytes(buff);
uploadedFileStream.close();
urlRequest.data=buff;
//add the http headers to the file part and send
this.getConnection(urlRequest, urlLoader,encoder.toString(),fileSize,index,chunkSize,fileName,fileId,buff);
}while(index<fileSize)
}
}
private function getConnection(urlRequest:URLRequest, urlLoader:URLLoader ,authString:String, fileSize:Number, index:Number, chunkSize:Number, fileName:String, fileId:String, requestBody:ByteArray):void{
//creates the relevent HTTP heaaders and assigned to parameters
try{
urlRequest.requestHeaders = parameters;
urlLoader.load(urlRequest);
}catch(error:Error){
Alert.show(error.message);
}
}
private function onRequestComplete(event:Event):String{
var loader:URLLoader = URLLoader(event.target);
Alert.show(loader.data,"Result");
}
private function onResponceFail(event:FaultEvent):void{
Alert.show(event.message.toString(),"Fault");
}
In order to achieve this, you should check if operation is finished in onRequestComplete instead:
Pseudo code just to get you going:
function startUpload()
{
// prepare big file
...
// then start the uploading
sendNextChunk();
}
function sendNextChunk()
{
// grab the next chunk
...
// and send it
getConnection(...);
}
function onRequestComplete()
{
// is there more chunks ?
if (...more chunks?)
sendNextChunk();
else
trace("All chunks uploaded");
}
Hope that helps,
Adnan