We Keep Coding

onclose, onopen, onerror not work in sockjs with typescript

i'm listen websocket with sockjs in typescript and angular
my code:
webSocketOpen() {
let ws = new SockJS('http://localhost:8081/chat', null, { timeout: 6000 });
ws.onopen = () => {
console.log('a');
}
ws.onclose = () => {
console.log('b');
}
ws.onerror = () => {
console.log('c');
}
this.stompClient = Stomp.over(ws);
let that = this;
this.stompClient.connect({}, () => {
that.stompClient.subscribe("/topic/messages", (message) => {
console.log(message.body);
}, (error) => {
console.log('error');
}
);
});
}
but onclose in sockjs doesn't work when connection to server is close or connection disconnected. as well as other method onopen, onerror. please help me how to know that the websocket is disconnected or connected?

Ending imap-simple connection within recursion

I currently have a script that checks for an incoming email (in a mailbox) every 30 seconds, using a recursion.
The package I'm using for this testing is imap-simple.
The below script currently does this as required;
var imaps = require('imap-simple');
const { connect } = require('net');
var config = {
imap: {
user: 'qatestspecialist#outlook.com',
password: 'specialistQa',
host: 'imap-mail.outlook.com',
port: 993,
tls: true,
authTimeout: 30000
}
};
module.exports = {
'delete any existing emails...': function () {
imaps.connect(config).then(function (connection) {
connection.openBox('INBOX').then(function () {
var searchCriteria = ['ALL'];
var fetchOptions = { bodies: ['TEXT'], struct: true };
return connection.search(searchCriteria, fetchOptions);
//Loop over each message
}).then(function (messages) {
let taskList = messages.map(function (message) {
return new Promise((res, rej) => {
var parts = imaps.getParts(message.attributes.struct);
parts.map(function (part) {
return connection.getPartData(message, part)
.then(function (partData) {
//Display e-mail body
if (part.disposition == null && part.encoding != "base64"){
console.log(partData);
}
//Mark message for deletion
connection.addFlags(message.attributes.uid, "\Deleted", (err) => {
if (err){
console.log('Problem marking message for deletion');
rej(err);
}
res(); //Final resolve
});
});
});
});
});
return Promise.all(taskList).then(() => {
connection.imap.closeBox(true, (err) => { //Pass in false to avoid delete-flagged messages being removed
if (err){
console.log(err);
}
});
connection.end();
});
});
});
},
'send email to seller and wait for mailbox notification': function (browser) {
// script to send an email to the mailbox...
},
'get new email info': function(browser) {
const createPromise = ms => new Promise((resolve, reject) => {
setTimeout(() => resolve(ms), ms)
});
function findUnseenEmails(connection) {
return connection.openBox('INBOX').then(function () {
var searchCriteria = ['UNSEEN'];
var fetchOptions = {
bodies: ['HEADER', 'TEXT'],
markSeen: false
};
return connection.search(searchCriteria, fetchOptions).then(function (results) {
var subjects = results.map(function (res) {
return res.parts.filter(function (part) {
return part.which === 'HEADER';
})
[0].body.subject[0];
});
return subjects.length > 0 ? subjects : createPromise(30000).then(function() { return findUnseenEmails(connection);
});
});
});
}
imaps.connect(config).then(function (connection) {
return findUnseenEmails(connection)
})
.then((subjects) => console.log(JSON.stringify(subjects)));
},
'Closing the browser': function (browser) {
browser.browserEnd();
}
};
This waits for an email and then displays the email 'header'.
However, the imap connection does not close, and stays open which is stopping my test suite from completing as the associated test never actually finishes.
I've tried adding the imap-simple command connection.end() in several places after the
imaps.connect(config).then(function (connection) {
return findUnseenEmails(connection)
})
part of the script, but it doesn't work.
So I'm just wondering if anyone knows where I should be adding this connection.end() command in order for the connection to be closed once an email has been received?
Any help would be greatly appreciated.

This has now been resolved in another post, using the following;
if (subjects.length > 0) {
connection.end();
return subjects;
} else {
return createPromise(5000).then(function() { return findUnseenEmails(connection)});
}

Service Worker - Failed to fetch files

Service worker is integrated in the app. When CSS requested Poppins-Regular.ttf file service worker doesn't send the cached file. Console "throws" error
The FetchEvent for [url] resulted in a network error response
But the files are getting cached along with other files when I run the app for the first time
Here is the code of the CSS file where I have added the font files
#font-face {
font-family: Poppins-Regular;
src: url('../fonts/Poppins-Regular.ttf');
}
#font-face {
font-family: Poppins-Medium;
src: url('../fonts/Poppins-Medium.ttf');
}
Here is the service worker code
const __cacheName = 'MyCache';
const __precacheResources = [
//fonts
'/inv/fonts/Segoe-UI.ttf',
'/inv/fonts/Segoe-UI-Bold.ttf',
'/inv/fonts/Poppins-Medium.ttf',
'/inv/fonts/Poppins-Regular.ttf',
];
var isFileLoadFinished = false;
self.addEventListener('install', event => {
isFileLoadFinished = false;
console.log('Service worker :', __sw_version, 'is installed!');
self.skipWaiting();
caches.delete(__cacheName);
event.waitUntil(
caches.open(__cacheName)
.then(cache => {
return cache.addAll(__precacheResources)
.then(() => {
isFileLoadFinished = true;
})
})
);
});
/*
this will send the object to the client via a message
#param {msg_} is an object to send to
#return null
*/
function sendMessagetoClients(msg_) {
console.log('sending msg to client. msg id is:', msg_.id)
self.clients.matchAll({
includeUncontrolled: true, //returns only the service worker clients controlled by the current service worker. The default is false.
type: "all"// "window"
}
).then(clients => {
if (clients.length == 0) {
console.log('No clients');
}
clients.forEach(client => {
console.log('the client is ', client);
client.postMessage(msg_);
});
});
}
self.addEventListener('activate', event => {
console.log('%s : Service worker :', (new Date()).toISOString(), __sw_version, ' is active! ');
sendMessagetoClients({
id: 002,
msgText: 'All items loaded',
data: isFileLoadFinished
});
});
self.addEventListener('fetch', event => {
event.respondWith(caches.match(event.request)
.then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request).catch(err => {
console.error(err);
});
})
);
});
self.addEventListener('message', event => {
console.log('%s : message received. msg id : %s', (new Date()).toISOString(), event.data.id);
//process the msg
if (event.data.id) {
if (event.data.id == 001) {
sendMessagetoClients({
id: 002,
data: isFileLoadFinished
})
} else if (event.data.id == 003) {
sendMessagetoClients({
id: 004,
data: __sw_version
})
}
}
return;
});
What should i do to fix those errors? Any help would be appreciated.

Change caches.match(event.request) to caches.match(event.request, { ignoreSearch: true })
Make sure if the requested URL is the same as the URL in the cache ('/inv/fonts/Poppins-Medium.ttf')
From developer.mozilla.org
ignoreSearch: A Boolean that specifies whether to ignore the query string in the URL. For example, if set to true the ?value=bar part of http://example.com/?value=bar would be ignored when performing a match. It defaults to false.

navigator.mediaDevices.enumerateDevices() not display device label on firefox

I am working on media control functionality. I am displaying device name to select from a dropdown and it's working fine on chrome but on firefox it will not fetching label or device name.

To complement the answers, on Firefox, the device labels obtained from navigator.mediaDevices.enumerateDevices() will also be set to the blank string in the case where there is no more active MediaStream, even though the application has been previously temporarily authorized to access the devices by calling navigator.mediaDevices.getUserMedia().
In the code below, the navigator.mediaDevices.enumerateDevices() will display the labels first (because the permission was granted from navigator.mediaDevices.getUserMedia()):
let stream = null
navigator.mediaDevices.getUserMedia({audio: true, video: false})
.then(s => {
stream = s
navigator.mediaDevices.enumerateDevices().then(devices => {
devices.forEach(device => {
console.log('device.label :', device.label)
})
})
})
.catch(error => {
console.log('Error :', error)
})
But if you clear the tracks of the created MediaStream, calling navigator.mediaDevices.enumerateDevices() again will result in labels being empty:
stream.getTracks().forEach(track => {
track.stop()
})
// No more active MediaStream => empty labels
navigator.mediaDevices.enumerateDevices().then(devices => {
devices.forEach(device => {
console.log('device.label :', device.label)
})
})
And you actually have to call navigator.mediaDevices.getUserMedia() again for a temporary permission to access the devices:
navigator.mediaDevices.getUserMedia({audio: true, video: false})
.then(s => {
navigator.mediaDevices.enumerateDevices().then(devices => {
devices.forEach(device => {
console.log('device.label :', device.label)
})
})
})
.catch(error => {
console.log('Error :', error)
})
Example here: https://codesandbox.io/s/pensive-hawking-hswzi
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/label

navigator.mediaDevices.enumerateDevices() will return an empty label attribute value in the media device info if the respective permissions are not granted.
To make it work, I placed this function after all of the media permissions have been granted so it returns a label attribute value as well.

navigator.mediaDevices.enumerateDevices() returns a promise that's fulfilled with an array of MediaDeviceInfo instances.
It worked for me in Firefox 56.0 (64-bit).
You can do something like this:
navigator.mediaDevices.enumerateDevices()
.then((data) => {
console.log('data', data);
})
.catch((err) => {
console.log('error getting MediaDeviceInfo list', err);
});
where data is the array that contains the list of all MediaDeviceInfo instances.
more info here:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

You need to grant the permissions first. try this code
if (navigator.mediaDevices.getUserMedia) {
console.log('getUserMedia supported.');
const constraints = {audio: true};
let chunks = [];
let onSuccess = function (stream) {
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
console.log("enumerateDevices() not supported.");
return false;
}
//List microphones.
navigator.mediaDevices.enumerateDevices().then(function (devices) {
devices.forEach(function (device) {
if (device.kind === "audioinput") {
console.log(device.label);//Other parameters device.kind/device.deviceId
}
});
}).catch(function (err) {
console.log(err.name + ": " + err.message);
});
}
let onError = function (err) {
console.log('The following error occured: ' + err);
}
navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);
} else {
console.log('getUserMedia not supported on your browser!');
}

client.postMessage() in service worker does not call onmessage handler inside angularjs controller

Service Worker Message Handler:
let angularClient;
self.addEventListener('message', function(event) {
// store the client which sent the message into angularClient variable
angularClient = event.ports[0];
});
Service Worker Notification Click Handler, Which sends data to angularClient
self.addEventListener('notificationclick', function(event) {
event.notification.close();
var url = /localhost:8080|example.com|https:\/\/www.example.com/;
var newurl = "/" + event.notification.data.url;
if (event.notification.data.url) {
newurl = event.notification.data.url;
}
function endsWith(str, suffix) {
console.log(str);
console.log(suffix);
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
event.waitUntil(
clients.matchAll({
type: 'window'
})
.then(function(windowClients) {
for (var i = 0; i < windowClients.length; i++) {
var client = windowClients[i];
if (url.test(client.url) && 'focus' in client) {
if (endsWith(client.url, newurl)) {
console.log("URL matched");
console.log("sending 1");
angularClient.postMessage(sendToAngularPayload);
return client.focus();
}
return client.navigate(newurl)
.then(client => client.focus());
}
}
if (clients.openWindow) {
console.log("sending 2");
angularClient.postMessage(sendToAngularPayload); //sendToAngularPayload is defined when notification is received in firebase's messaging.setBackgroundMessageHandler.
return clients.openWindow('https://www.example.com/#/' +
event.notification.data.url);
}
})
);
},true);
AngularJs Controller with functions
Function to send message to service worker so that it stores this client
$scope.checkServiceWorker = function() {
if ('serviceWorker' in navigator) {
// ensure service worker is ready
navigator.serviceWorker.ready.then(function(reg) {
console.log("Send message");
// PING to service worker, later we will use this ping to
//identify our client.
sendMessage().then(function(event) {
console.log(event);
}).catch(function(error) {
console.log("error", error);
location.reload();
});
}).catch(function() {
console.log('SW not ready');
$scope.checkServiceWorker();
});
}
}
sendMessage function with onMessage handler
function sendMessage() {
return new Promise(function(resolve, reject) {
var messageChannel = new MessageChannel();
messageChannel.port1.onmessage = function(event) {
console.log("on message handler", event);
if (event.data.error) {
reject(event.data.error);
} else {
console.log('inside resolve', event.data);
console.log("Ping received from SW");
console.log(event);
resolve(event.data);
}
};
console.log("Sending");
navigator.serviceWorker.controller.postMessage("ping",
[messageChannel.port2]);
console.log("sent");
});
}
The problem is that onMessage Handler inside angularjs controller gets fired 90% of the times, but sometimes it does not. As I can see in the developer console, the execution stops in serviceworker.js after I print "sending 1" in the notification click handler, and does not show rest of the logs inside the controller's onMessage handler.

worker.ts
self.addEventListener("push", e => {
const data = e.data.json();
console.log("Push received");
console.log("data ", data);
self.registration.showNotification(data.title, {
body: "Notified",
})
// Broadcasting from a ServiceWorker to every client
self.clients.matchAll().then(all => all.map(client => client.postMessage(data)));
})
The listener is added on navigator.serviceWorker and not on a specific
worker
AngularJs controller:
constructor() {
navigator.serviceWorker.addEventListener('message', e => console.log(e.data));
}