DEV Community

Cover image for Angular WebSockets with PieSocket
bob.ts
bob.ts

Posted on • Edited on

4 2

Angular WebSockets with PieSocket

I've wanted to work with WebSockets for a while and struggled to find a good project to implement them on. Then, just about the time that I did find 'that' project, I ran into PieSocket.

They are self-described as "WebSockets as a Service."

Here, I was able to implement communications between browsers on separate machines with ease.

Code

Here, I'd like to share my SocketService ...

import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

export interface SocketMessage {
  type: string;
  payload: any;
};

@Injectable()
export class SocketService {

  websocket: any;

  constructor() {
    this.connectWebSocket();
  }

  connectWebSocket = (): void => {
    const CLUSTER_ID: string = 'FROM-PIE-SOCKET--CLUSTER-ID';
    const CHANNEL_ID: string = 'FROM-PIE-SOCKET--CHANNEL-ID';
    const API_KEY: string = 'FROM-PIE-SOCKET--API-KEY';

    try {
      this.websocket = new WebSocket(`wss://${ CLUSTER_ID }.piesocket.com/v3/${ CHANNEL_ID }?api_key=${ API_KEY }`);

      this.websocket.onopen = () => {
        const initMessage: SocketMessage = {
          type: 'initial',
          payload: ''
        };
        this.publish(initMessage);
      };
    } catch (error) {
      console.log(error);
    }
  };

  messagesOfType = (type: string): Observable<SocketMessage> => {
    return new Observable(observer => {
      this.websocket.onmessage = (eventString: MessageEvent) => {
        const event: SocketMessage = JSON.parse(eventString.data);
        if (event.type === type) {
          observer.next(event);
        }
      };
    });
  };

  errorHandler = (): Observable<Event> => {
    return new Observable(observer => {
      this.websocket.onerror = (event: Event) => {
        observer.next(event);
      };
    });
  };

  publish = (message: SocketMessage) => {
    try {
      this.websocket.send(JSON.stringify(message));
    } catch (error) {
      console.log(error);
    }
  };

}

Enter fullscreen mode Exit fullscreen mode

Since I was just testing things, I've got the cluster id, channel, and api key stored within the code. If this were a project for a client, I would have secured these details.

If you read my article Angular Communication Between Tabs, you would realize that the "initialize" (in this case connectWebSocket) is pulled out to make testing easier. Additionally, I have added a try-catch block to allow for error handling.

The function messagesOfTypes returns an observable that watches the websocket.onmessages and returns data, when needed.

There's an errorHandler function that is used by the initialization try-catch.

The publish function does just what it says.

Implementation

Here's the code to publish ...

this.socketService.publish({ type: 'student', payload: 'bob fornal'});
Enter fullscreen mode Exit fullscreen mode

And, here's the code to use messagesOfType ...

this.broadcast.messagesOfType('student').subscribe((message: SocketMessage) => {
  const student: string = message.payload;
  this.publishStudents();
});
Enter fullscreen mode Exit fullscreen mode

Summary

Having wanted to work with WebSockets for a while, I found one. Additionally, I ran into PieSocket who made the learning process easy.

This code shows how I was able to implement communications between browsers on separate machines with ease.

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay