JavaScript関連のことを調べてみた2022年01月15日

JSON.stringifyのreplacer関数内のif文の条件にtypeofが必要な理由は？

オブジェクトからJSON文字列を作成するには、JSON.stringifyを使います。
JSON.stringifyは、target、replacer、spaceの引数があります。

replacer関数内のif文の条件typeofが無い場合は、undefinedになってしまいます。

“`JavaScript
const target = {a: “apple”, b: “banana”, l: “lemon”};

function replacerNG(prop, value) {
if (value !== “banana”) {
return
}
return value;
}

console.log(JSON.stringify(target, replacerNG));

> undefined
“`

replacer関数内のif文の条件typeofがある場合は、条件にあった「banana」が変換されています。

“`JavaScript
const target = {a: “apple”, b: “banana”, l: “lemon”}

Vue.js + Server-Sent Eventsで画像をリアルタイム取得してみる

#概要
サーバーから能動的にデータを送信するHTTP通信方法であるServer-Sent Events(SSE)を利用して画面上の画像を都度差し替えて表示する仕組みを作ってみました。

今回は画像送信を挙げていますが、特にチャット文言やセンサーデータなどリアルタイムでやり取りさせるものでよりイメージが出来るかと思います。

#導入
##画面側
下記のコードをvue.js内のmethodsに書き込めばおおよそ完了。
EventSourceにはリアルタイム取得したいサーバー側のURIを書き込み、Cookieも有効にしたい場合はコンマ区切りで{ withCredentials: true }を追加すればOK。
今回はサーバーから取得した画像ファイルをそのまま出すだけなのでevent内のdataをそのまま変数に格納する作りになります。

“`