javascript - 无法从 websocket 消息对象获取 json 值
问题描述
我想从 websocket 连接接收消息并将它们显示为推送通知,如下所示:
socket.onmessage = msg => {
if( 'Notification' in window){
if (Notification.permission === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
doNotify(msg);
});
}
else{
Notification.requestPermission()
.then(function(result) {
console.log(result); //granted || denied
if( Notification.permission == 'granted'){
doNotify();
}
})
.catch( (err) => {
console.log(err);
});
}
}
};
function doNotify(msg) {
console.log('msg to deal with is:', msg) ;
console.log('type of message: ', typeof msg);
let msgJ = JSON.stringify(msg);
console.log('msg in json format:', msgJ) ;
console.log('type of msgJ: ', typeof msgJ);
console.log('sender:', msgJ.data.sender) ;
console.log(' body:', msgJ.data.body) ;
let title = "Message from" + msgJ.data.sender;
let body = msgJ.data.body;
let options = {
title: title,
body: body,
vibrate: [100, 200, 100]
}
let n = new Notification(title, options);
}
但是,我似乎无法从收到的消息中提取title
和提取。body
以下是控制台日志结果:
msg to deal with is: MessageEvent {isTrusted: true, data: "{"sender":"tomtom","body":"Hi there"}↵", origin: "ws://127.0.0.1:8080", lastEventId: "", source: null, …}
type of message: object
msg in json format: {"isTrusted":true}
type of msgJ: string
socket.js?1579263492:52 Uncaught (in promise) TypeError: Cannot read property 'sender' of undefined
at doNotify (socket.js?1579263492:52)
at socket.js?1579263492:17
这里有什么问题?我该如何解决?
解决方案
MessageEvent.data
正如@chg 已经指出的那样,看起来像 JSON 字符串,因此您需要将其转换为对象。
let data = JSON.parse(msg.data);
let title = "Message from " + data.sender;
推荐阅读
- javascript - 我需要构建一个 onScroll 函数来检测屏幕上最大的 html 元素。基于数组中的 IDS
- java - Spring Security @PreAuthorize 或 @PreFilter
- python - 如何使用 tqdm 在 python 中添加进度条
- visual-studio-code - 没有 Git 的 Visual Studio Code 中的差异突出显示
- django - 为我的 Django (Elastic Beanstalk) 后端 API 配置 SSL (HTTPS)
- typo3 - TypoScriptFrontendController 必须使用有效的 SiteLanguage 对象或当前请求中的已解析站点作为后备来构造。没有给出
- java - 给字段赋值和在构造函数中初始化字段值的区别
- jestjs - 开玩笑 - 如何断言数组中的所有项目都是对象并包含某些属性?
- kotlin - 如何在 Kotlin 中创建 Guava CacheBuilder?
- wpf - 强制两个 WPF 控件具有相同的宽度,同时保持来自 xaml 的自动调整大小(两个控件的宽度都大于两个)