静岡大学➕ ビルドまだ別のチャットアプリ💭 しかし、P 2 P/E 2 EE🤯.!!

20214 ワード

webdev beginners javascript tutorial テキストリンク

このタイトルはどういう意味ですか
この記事のタイトルを読むことによって、あなたは我々がちょうどチャットアプリを構築するつもりであると思っているならば、あなたは間違っていると思っています😅. ヘイ!我々はすべての私たちの自由な時間にしてなぜ再び1つを構築するチャットアプリのいくつかの種類を構築している.あなたが去る前に、なぜ私たちがちょうどチャットアプリを作成しようとしていない理由を説明させてください、そして、それがどんな残りのAPIも使用しないので、あなたが過去に構築したものと異なっている理由を説明させてください.私たちは、より速くより良い何かを構築するつもりです.そして、それは終わりまで暗号化されて、どんなサーバーも必要としません、そして、そのコードは書くために短いです.

私がこの記事を書いている理由の後ろにいくつかの考え
それで、2人のピアの間のリアルタイムコミュニケーションをどのように作成するかについて検索を開始するとき、私は多くの結果を得ませんでした.すべては理解しにくいと初心者のための多くの助けではなかった.つの単語を検索しながら、何度も何度も、それはwebrtcだった.だから私はそれが何であるかを理解し、どのように動作します.
まず最初に見つけたのは、webrtcと2番目の誤解について良い内容を見つけるのは本当に難しいことです.私はこの記事の2番目の1つに焦点を当てています.私たちのほとんどは、WebRTCの開始時にそれがちょうどビデオ/オーディオのストリーミングに関連していると思うときに、それはクライアントのクライアント接続に制限されているため、ブラウザ内に存在するため、ほとんどの私たちの.しかし、webrtcはビデオ/オーディオよりはるかに大きいとダイナミックなものです.それはいくつかの大きな伝説的なプロトコルの肩の上に構築されています.

WEBRTC 101

Just for a quick note I'm not going in depth how WebRTC work. If you're interested you can read WebRTC For The Curious book.

WebRTCは、Webリアルタイム通信のための短い、APIとプロトコルの両方です.webrtc APIは開発者にwebrtcプロトコルを使用することを可能にします.webrtcを使用すると、アプリケーションにリアルタイム通信機能を追加できます.webrtc apiはW3C とIETF . これは、異なるプロトコルのバンドルです.それだけでなく、ビデオ/オーディオよりもはるかに大きいですが、テキスト、バイナリや一般的なデータを送信することができます制限されていません.好奇心を高めるCloud gaming is going to be build around WebRTC

いくつかの特徴

既定の機能でE 2 EE.

パブリックIP(NATの横断、氷)の2つのユーザーを接続します.

滞在(氷の再起動による自動交渉)に接続してください.

IP(MDNS)を知らずに接続します.

これ以上の見出しをブロックします.

You can understand WebRTC Lingo by clicking here

WebBRTCがどのようにこれらの魔法をするかについて理解しましょう.

シグナリングの提供/回答:-ので、私たちはあなたと私を知っていない知らない.私たちには、どのようにコミュニケーションをしているか、そして、彼らが何を伝えようとしているのかということについて、全く考えがありません.ですから、私たちがお互いに説明するシグナリングによって、これは私のアドレス(NATマッピング)です、そして、これは私がサポートする言語(CODEC)です、私たちはメディア(mediastream)または若干の一般的なデータ(datachannel)について話すことができます.これはすべてSDPを共有することによって行われます.

接続:-私たちはお互いに十分に知っている.しかし、問題は、我々がアプリケーション層のネットワーク・タームのより高いレベルで互いを知っているだけであるということである、我々は互いの限界を知っていて、我々が氷候補を共有する理由であるネットワーク層で通信するより良い方法を見つけるべきです.Why we need ICE more here .
レイマンの条件の氷候補は、私の電話番号です、これは私の電子メールです、これらのすべてが氷候補でありえる私の家のアドレスです.簡単な用語では、氷候補はちょうど「これらはあなたが私にアクセスすることができるいくつかの経路です」それはhostname(ローカルIP addr)、サーバー反射(NATマッピング)、リレー(プロキシサーバー/ターンサーバー)などでありえます.
氷候補のため、我々は移動に接続することができます.-新しい氷の候補として移動する(無線LAN/LTE).(接続を再開する際の自動交渉)

保証:- DTLS(UDPの上のTLS)+ SRTP、RTPの上の暗号化.つまり、エンドツーエンドの暗号化( E 2 EE )を持っています.中央にはこれ以上の男.

通信は-今、通信、mediacommunicationやdatachannelあなたが望むことができます.

を使ってチャットアプリを構築しましょう
チャットアプリケーションでは、2つのピアローカルとリモートされます.私たちはブラウザでwebrtc APIを使うつもりです.

ステップ1:初期のJSセットアップ

このHTMLは現在JavaScriptと接続し、いくつかのイベントを追加します.

let localmessageInput = document.getElementById("local");
let localMessageArea = document.getElementById("localmsg");

localmessageInput.addEventListener("keyup", (event) => {
  if (event.key === "Enter") {
    addChildMessage(localMessageArea, event.target.value, "right");
    localChannel.send(event.target.value);
    event.target.value = "";
  }
});

入力要素とメッセージへのリファレンスを取得します.

イベント要素にイベントを追加するたびにENTER が押される.

テキスト領域にメッセージを追加するright 整列.

コールするlocalChannel.send 関数と入力値を渡します.

入力値をクリアします.

Everything is same for remote peer part of code.

手順2 -

let config = null;
// config = {
//   iceServers: [
//     {
//       urls: ["stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"],
//     },
//   ],
//   iceCandidatePoolSize: 10,
// };

let localPeer = new RTCPeerConnection(config);
let remotePeer = new RTCPeerConnection(config);

作成する RTCPeerConnection リモートピアに接続し、接続を維持し、監視するメソッドを提供するオブジェクトです.設定ではnull インターネット上の2つのピアを接続している場合、私たちのプロジェクトは、ローカル環境で実行されているので、コメントの設定を使用することができます.

手順3接続を確立する

Step define here are not proper way of signalling so please refer The WebRTC perfect negotiation pattern

async function init() {
  localPeer
    .createOffer()
    .then((localOffer) => localPeer.setLocalDescription(localOffer))
    .then(() => remotePeer.setRemoteDescription(localPeer.localDescription))
    .then(() => remotePeer.createAnswer())
    .then((remoteSDP) => remotePeer.setLocalDescription(remoteSDP))
    .then(() => localPeer.setRemoteDescription(remotePeer.localDescription))
    .catch((err) => window.alert(err));
}

それで、誰でもここでLocalPeerがそれを呼ぶことによってそれを始める申し出を始めることができます.createOffer() これはlocalpeerのsdpを返す.

我々の店localOffer にlocalPeer 呼び出しによってsetRemoteDescription .

ここでは、WebSocketやREST APIのようなメソッドでLocalDescriptionを送ることができます.しかし、我々の両方のピアがローカルに存在するように我々は直接設定されますsetRemoteDescription のためにremotePeer .

今すぐLocalPier独自の説明とRemotePeer LocalPeerの説明を持って、今RemotePeer呼び出してcreateAnswer() これは、説明を作成するだけでなく、接続プロセスを開始します.

と同じlocalOffer また、共有することができますremoteSDP どんな命令でも.ここに我々はちょうどそれを渡すlocalPeer .

現在、同輩は、説明または知識を互いに持っています.今、彼らは接続を開始することができます.

If you didn't understand the proccess above then you can refer flow diagram from here.

ステップ4.接続

localPeer.onicecandidate = ({ candidate }) => remotePeer.addIceCandidate(candidate);
remotePeer.onicecandidate = ({ candidate }) => localPeer.addIceCandidate(candidate);

onicecandidate ローカルICEエージェントがシグナリングサーバを通して他のピアにメッセージを配送する必要があるときはいつでも、呼び出される関数を指定するイベントハンドラです.それが共有する氷候補の情報を共有し、他のピア、他のピアだけで候補を追加する共有する情報です.このwebrtc APIによってすべての氷候補を試してみて、最適な氷の候補を開始確立します.この手順が完了したら、接続を確立します.🎉🎊.

ステップ5.データカード

let localChannel = localPeer.createDataChannel("chat");
let remoteChannel = null;

localChannel.onmessage = (event) => {
  log("Got message at local side", event);
  addChildMessage(localMessageArea, event.data, "left");
};

remotePeer.ondatachannel = (event) => {
  remoteChannel = event.channel;
  remoteChannel.onmessage = (event) => {
    log("Got msg at remote side", event);
    addChildMessage(remoteMessageArea, event.data, "left");
  };
};