Angular5: служба не определена в функции socket.on

Question

Я пытаюсь реализовать чат с помощью socket.io в моем приложении angular5.

Component.ts

export class ChatComponent implements OnInit {
    private socket: SocketIOClient.Socket;
    constructor(
        private chatService: ChatsService
    )

    ngOnInit() {
        this.socketInit();
    }

    socketInit() {
        this.socket.on('chat', function(data) {
            console.log("message", data);
            this.chatService.chats.userChats.push({
                message: data.message
            });

        });
    }
}

обслуживание

@Injectable()
export class ChatsService {
    chats: any = {
        userInfo: {},
        userChats: [],
    };
}

в socket.on я получаю значения, но проблема с толчком

this.chatService.chats.userChats.push({
    message: data.message
});

Не удается прочитать свойство "чаты" из неопределенного

Также this.chatService недоумен в socket.on