Help us understand the problem. What is going on with this article?

AngularからMattermostにWebSocketで接続して投稿内容を取得する

More than 1 year has passed since last update.

タイトルのことがやりたかっただけなんですけど。
Mattermostに投稿があった時に、Angularでもその内容をリアルタイムで表示したくてですね。APIに定期的にアクセスしてもいいんですけど、せっかくなのでWebSocketで接続したい。
というわけで、"Angular WebSocket"あたりで検索してみたところ、Socket.IOを使うだのObserverやら使うだの、かなり難度の高い方法ばかりでてくるんですが……
最終的に、下記のコードだけで実現できました。

app.component.ts
import { Component, OnInit } from '@angular/core';
import { webSocket } from "rxjs/webSocket";
const subject = webSocket('wss://mattermost-server/api/v4/websocket');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    subject.subscribe(
      (message: any) => {
        if(message.event == 'posted') console.log(JSON.parse(message.data.post).message);
      },
      err => console.log(err),
      () => console.log('complete')
    );
  }
}

んもー、すごく簡単じゃないですか。いやー、RxJS便利。
ここにたどり着くまでにあれこれ遠回りしましたよ。

ちなみに、素のJavaScriptだとこんな感じ。

const socket = new WebSocket("wss://mattermost-server/api/v4/websocket");
socket.addEventListener("message", event => {
  let message = JSON.parse(event.data);
  if(message.event == 'posted') console.log(JSON.parse(message.data.post).message);
});

そう、こんな風にシンプルに書きたかったんですよ。んもー。


追記。サービス化するとこんな感じ。

websocket.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { webSocket } from "rxjs/webSocket";
const subject = webSocket('wss://mattermost-server/api/v4/websocket');

@Injectable({
  providedIn: 'root'
})
export class WebsocketService {

  data = new Subject<any>();
  data$= this.data.asObservable();

  constructor() {
    subject.subscribe(
      (message: any) => {
        this.data.next(message);
      },
      err => console.log(err),
      () => console.log('complete')
    );
  }
}
app.component.ts
import { Component, OnInit } from '@angular/core';
import { WebsocketService } from './websocket.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(
    private websocket: WebsocketService,
  ) {}

  ngOnInit() {
    this.websocket.data$.subscribe(
      (message: any) => {
        if(message.event == 'posted') console.log(JSON.parse(message.data.post).message);
      }
    );
  }
}

サービス側で、イベント種別毎だとかチャンネル毎だとかで分けてnextに流すと便利なんだろうな……
気が向いたら実装してみよう。

8amjp
福井市に住むSE・プログラマ。Kindleストアで技術系異世界ファンタジー小説「Redmineで始める異世界人心掌握術」販売中。JavaScript学園コメディ「恋に落ちるコード.js」電子書籍化準備中。
https://8am.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした