使用ws通过websocket发送对象:无法反序列化

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用ws通过websocket发送对象:无法反序列化相关的知识,希望对你有一定的参考价值。

所以我尝试通过我的websocket发送一个对象,将其转换为json,然后返回时返回。不幸的是,它给了我以下错误。 console.log向我显示它是有效的JSON,但不知怎的,它在服务文档中的JSON.parse上给了我一个错误。谁能看到我做错了什么?

错误

core.js?223c:1440 ERROR SyntaxError: Unexpected token c in JSON at position 0
    at JSON.parse (<anonymous>)
    at WebSocket._this.ws.onmessage [as __zone_symbol__ON_PROPERTYmessage] (movie-chat.service.ts?6086:22)
    at WebSocket.wrapFn (zone.js?fad3:1166)

event.data的result.log结果(有效的json)

{"message":"good boy","extra":"extra"}

电影chat.service.ts

import {Injectable} from "@angular/core";
import 'rxjs/rx';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs/Observable";

// We need @injectable if we want to use http
@Injectable()

export class MovieChatService {
ws;

constructor(private http: HttpClient) {
}

// receive events
createObservableSocket(url:string){
    this.ws = new WebSocket(url);
    return new Observable(observer => {
        this.ws.onmessage = (e) => {
            console.log(e.data);
            var object = JSON.parse(e.data);
            observer.next(object);
        }
        this.ws.onerror = (event) => observer.error(event);
        this.ws.onclose = (event) => observer.complete();
    }
    );
}
// send events
sendMessage(message) { 
    message = JSON.stringify(message);
    console.log(message);
    this.ws.send(message); 
}

}

消息的后端处理

var wss = new Websocket.Server({port:3185});
var CLIENTS = [];

wss.on('connection',
    function(websocket) {

        CLIENTS.push(websocket);
        websocket.send('connected to socket');


        websocket.on('message', function (message) {
            console.log('Server received:', message);
            sendAll(message)
        });

        websocket.on('close', function(client) {
            CLIENTS.splice(CLIENTS.indexOf(client), 1);
        });

        websocket.on('error', function(client) {
            CLIENTS.splice(CLIENTS.indexOf(client), 1);
        });
});

电影chat.component.ts

import {Component, OnInit} from "@angular/core";
import { MovieChatService} from "./movie-chat.service";

@Component({
    selector: 'app-movie-chat',
    templateUrl: './movie-chat.component.html',
    styleUrls: ['./movie-chat.component.css']
})

export class MovieChatComponent implements OnInit{

    fullName;
    messageFromServer;
    title = 'Websocket Demo';
    url;
    ws;
    messages = [];

    constructor(private movieChatService: MovieChatService){
    }

    ngOnInit(){
        this.fullName = localStorage.getItem('fullName');
        this.url = 'ws://localhost:3185';
        this.movieChatService.createObservableSocket(this.url)
            .subscribe(data => {
                    this.messageFromServer = data;
                },
                err => console.log(err),
                () => console.log('The observable stream, is complete'));
    }

    sendMessageToServer(){
        console.log('Client sending message to websocket server');
        this.movieChatService.sendMessage({
            message: 'good boy',
            extra: 'extra'
        });
    }
}
答案

看来你正试图解析一个Json对象,

{"message":"good boy","extra":"extra"}

JSON.parse期望字符串参数,并且您正在传递一个Json对象,因为该异常会增加。我们尝试用try和catch来包围Parse

import {Injectable} from "@angular/core";
import 'rxjs/rx';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs/Observable";

// We need @injectable if we want to use http
@Injectable()

export class MovieChatService {
ws;

constructor(private http: HttpClient) {
}

// receive events
createObservableSocket(url:string){
    this.ws = new WebSocket(url);
    return new Observable(observer => {
        this.ws.onmessage = (e) => {
            console.log(e.data);
            try {
                var object = JSON.parse(e.data);
                observer.next(object);
            } catch (e) {
                 console.log("Cannot parse data : " + e);
            }
        }
        this.ws.onerror = (event) => observer.error(event);
        this.ws.onclose = (event) => observer.complete();
    }
    );
}
// send events
sendMessage(message) { 
    message = JSON.stringify(message);
    console.log(message);
    this.ws.send(message); 
}

}
另一答案

所以,我实际上并没有按照我想要的方式解决它,但我发现可以通过websocket发送数组。我这样做了,在接收端我将它转移到服务文件中的一个对象中。它现在完成了这项工作。如果有人知道更好的解决方案,请告诉我:)

createObservableSocket(url:string){
        this.ws = new WebSocket(url);
        return new Observable(observer => {
            this.ws.onmessage = (e) => {
                var obj = e.data.split(',');
                console.log(obj);
                obj = {
                    name: obj[0],
                    msg: obj[1]
                };
                console.log(obj);
                observer.next(obj);
            }
            this.ws.onerror = (event) => observer.error(event);
            this.ws.onclose = (event) => observer.complete();
        }
        );
    }

以上是关于使用ws通过websocket发送对象:无法反序列化的主要内容,如果未能解决你的问题,请参考以下文章

无法在 REST WS 中反序列化 LocalDate 值

c# sorket序列化反序列化如何如何传接Object?

未捕获的 InvalidStateError:无法在“WebSocket”上执行“发送”:

如何在 Haskell 中序列化/反序列化通过网络发送的对象?

IPC反序列化异常仅在接收数据时?发送工作正常

GWT JPA - 无法反序列化响应