ソケットを使用してプライベートチャット.io
13044 ワード
ヘイ!私はここでシリーズを更新していないが、私はgoodeedアプリの進歩のかなり多くをした.このアプリの機能の一つは、プライベートチャットとどのようなより良い技術ソケットよりもリアルタイムのコミュニケーションに使用することが含まれます.入出力
アイデアは、ユーザーが借りるしたいアイテムについての詳細について知りたい場合、またはそれらのような詳細を残して快適ではない場合など、コメントを満たすために、彼らはメッセージを他の個人的に選択することができます.だから、基本的に1 - 1チャットです.
ソケット接続を作成し、プライベートメッセージング機能の仕事をするためにいくつかの方法がありますが、いくつかの試みの後、私はチャットが2人の参加者の最大であることができる部屋で開催される部屋のルートを行うことを決めた.ソケットについてもっと調べてください.イオルームhere .
ソケット.IOは、サーバーとクライアントの統合が必要です.このフローはサーバ上のソケットインスタンスを作成し、接続時にソケットにアクセスしますevents のいずれかを聞いたり、受信します.クライアントは、クライアントがサーバのポートに接続するだけで、ほとんど同じことをします.
ソケット.IOは自動的に接続されたクライアントのユニークなIDを作成し、そのID自体は部屋です.例えば、ログ
それから、我々はクライアントに加わります
また、ソケットが使用されなくなったら、ソケットを切断して全てのリスナを削除することを忘れないでください.
クライアント側では、サーバーにマッチするイベントリスナーを設定するつもりです.部屋に入るために、我々はこのようなことをするでしょう
アイデアは、ユーザーが借りるしたいアイテムについての詳細について知りたい場合、またはそれらのような詳細を残して快適ではない場合など、コメントを満たすために、彼らはメッセージを他の個人的に選択することができます.だから、基本的に1 - 1チャットです.
ソケット接続を作成し、プライベートメッセージング機能の仕事をするためにいくつかの方法がありますが、いくつかの試みの後、私はチャットが2人の参加者の最大であることができる部屋で開催される部屋のルートを行うことを決めた.ソケットについてもっと調べてください.イオルームhere .
ソケット.IOは、サーバーとクライアントの統合が必要です.このフローはサーバ上のソケットインスタンスを作成し、接続時にソケットにアクセスしますevents のいずれかを聞いたり、受信します.クライアントは、クライアントがサーバのポートに接続するだけで、ほとんど同じことをします.
const { Server } = require('socket.io');
const io = new Server(res.socket.server);
io.on('connection', socket => {
console.log(socket.id + ' ==== connected');
// creating a room name that's unique using both user's unique username
socket.on('join', roomName => {
let split = roomName.split('--with--'); // ['username2', 'username1']
let unique = [...new Set(split)].sort((a, b) => (a < b ? -1 : 1)); // ['username1', 'username2']
let updatedRoomName = `${unique[0]}--with--${unique[1]}`; // 'username1--with--username2'
Array.from(socket.rooms)
.filter(it => it !== socket.id)
.forEach(id => {
socket.leave(id);
socket.removeAllListeners(`emitMessage`);
});
socket.join(updatedRoomName);
socket.on(`emitMessage`, message => {
Array.from(socket.rooms)
.filter(it => it !== socket.id)
.forEach(id => {
socket.to(id).emit('onMessage', message);
});
});
});
socket.on('disconnect', () => {
console.log(socket.id + ' ==== diconnected');
socket.removeAllListeners();
});
});
それで、少しこれを歩きましょう.私は、一つの接続が確かに私が欲しいものでない複数の部屋に加わることができるとわかりました.ユーザーがチャットをクリックするとき、我々はそれを発したいですjoin
クライアント側から、username 1のような参加者のユニークなユーザ名を持つ文字列-- with -- username 2.これは、username 1とusername 2がユニークな部屋に加わる必要があることを示します.ここに2人のクライアントがいるのでroomName
ある方法でソートされるcurrentUser--with--whoTheUserWantsToChatWith
. だからsort
我々は、2つの参加者が同じものに加わることができるユニークなルーム名を生成するので、必要が発生する.ソケット.IOは自動的に接続されたクライアントのユニークなIDを作成し、そのID自体は部屋です.例えば、ログ
socket.rooms
クライアントの場合はusername1
) ソケットで.ID123123
) が接続されますArray.from(socket.rooms) // ['123123']
プライベートチャットルームに入る前にusername2
, 最初にソケットが1部屋しかないことを確認する必要があります.ID123123
(上記の例と同様)他の部屋はありません.他の部屋があるならば、我々はその部屋を去る必要がありますsocket.leave(roomName)
削除emitMessage
リスナー.それから、我々はクライアントに加わります
socket.join(roomName)
console.log(Array.from(socket.rooms) // ['123123', 'username1--with--username2'])
今、サーバーからクライアントにメッセージを発する時間です.socket.on(`emitMessage`, message => {
Array.from(socket.rooms)
.filter(it => it !== socket.id)
.forEach(id => {
socket.to(id).emit('onMessage', message);
});
});
});
ここで聞いているemitMessage
イベントとmessage
クライアントが送信したパラメータ.今、私はクライアントが唯一の部屋にメッセージを送るだけですが、それ自身のソケットではありません.一度フィルタを行うと、そこにユニークな部屋を指さしているonMessage
クライアントが聞いているイベントmessage
.また、ソケットが使用されなくなったら、ソケットを切断して全てのリスナを削除することを忘れないでください.
クライアント側では、サーバーにマッチするイベントリスナーを設定するつもりです.部屋に入るために、我々はこのようなことをするでしょう
// user: username2, anotherUser: username1
socket.emit('join', `${user}--with--${anotherUser}`);
メッセージをサーバーに送信するには、クライアントがemitMessage
メッセージ付きイベント.// send message
socket.emit(`emitMessage`, "Hello world!");
から送信されるサーバーからメッセージを受信するにはonMessage
イベント// receive message
socket.on('onMessage', msg => {
console.log(msg) // "Hello world!"
});
楽しいコーディングがある:)Reference
この問題について(ソケットを使用してプライベートチャット.io), 我々は、より多くの情報をここで見つけました https://dev.to/chewypao/private-chat-using-socket-io-39o5テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol