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

Posted 2021-05-04

所以我尝试通过我的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();
        }
        );
    }