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

Question

So I tried sending an object through my websocket by translating it to json and then back when it returns. Unfortunately it gives me the below error. The console.log shows me that it is valid JSON, but somehow it gives me an error at JSON.parse in the service document. Can anyone see what I did wrong?

The error

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)

console.log result of event.data (valid json)

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

movie-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); 
}

}

Back-end handling of messages

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);
        });
});

movie-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'
        });
    }
}

Answer 1

It seems that you are trying to parse a Json Object,

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

JSON.parse expect string parameter and you are passing an Json Object for that the exception is rised. We try to surround the Parse with try and catch

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); 
}

}

Answer 2

So, I didn't actually solve it the way I wanted it, but I found out that it is possible to send arrays through a websocket. I did this and on the receiving end I transferred it into an object in the service file. It does the job for now. If anyone knows a better solution, let me know :)

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();
        }
        );
    }