آموزش WebRTC DataChannel – انجمن DEV

Summarize this content to 400 words in Persian Lang

نمای کلی

در این راهنما می آموزیم که چگونه می توانید یک برنامه چت صرفاً با استفاده از کانال های داده WebRTC بسازید.

برنامه بسیار ساده خواهد بود، ما دو پنجره چت در یک صفحه خواهیم داشت و پیام ارسال شده در یک پنجره در پنجره دیگر دریافت می شود و بالعکس.

پیام‌ها از طریق اتصال همتا به همتا WebRTC منتقل می‌شوند، حتی اگر هر دو پنجره چت در یک صفحه هستند، اما می‌توانند در رایانه‌های مختلف در سراسر جهان باشند.

پیش نیاز

برای ایجاد یک اتصال همتا به همتا، به یک سرور STUN و TURN نیاز دارید.

می‌توانید برای یک حساب کاربری رایگان ثبت‌نام کنید و در صورت تمایل از سرور مترد STUN/TURN یا هر سرور STUN TURN دیگری استفاده کنید. اگر به اطلاعات بیشتری در مورد سرورهای TURN نیاز دارید، از این صفحه دیدن کنید.

WebRTC DataChannels

WebRTC DataChannels به ما اجازه می دهد تا داده های دلخواه را از طریق اتصالات نظیر به نظیر به اشتراک بگذاریم. می تواند متن یا حباب برای به اشتراک گذاری فایل ارسال کند. در این مثال ما یک کانال داده برای به اشتراک گذاری پیام های متنی ایجاد خواهیم کرد.

راهنمای گام به گام ساخت یک برنامه گفتگوی WebRTC

مرحله 1: داربست UI

بیایید ابتدا یک رابط چت ساده بسازیم، ما دو پنجره چت برای هر کاربر (کاربر A و کاربر B) ایجاد می کنیم.

lang=”en”>

body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: row;
align-items: center;
padding: 20px;
}
.chat-window {
width: 45%;
border: 1px solid #ccc;
padding: 10px;
margin-right: 10px;
}
.messages {
height: 300px;
overflow-y: auto;
border: 1px solid #eee;
margin-bottom: 10px;
padding: 10px;
}
input[type=”text”] {
width: 70%;
padding: 5px;
}
button {
padding: 5px 10px;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: راه اندازی WebRTC PeerConnection

ما دو شی RTCPeerConnection یکی برای هر کاربر ایجاد می کنیم.

سپس iceCandidates را بین دو PeerConnection مبادله خواهیم کرد تا یک ارتباط همتا به همتا برقرار کنیم.

در حال حاضر از آنجایی که هر دو شی RTCPeerConnection در یک صفحه هستند، ما در حال تبادل مستقیم ice-کاندیداها هستیم، در یک برنامه دنیای واقعی، شما با استفاده از یک سرور سیگنالینگ، ice-کاندیداها را مبادله خواهید کرد.

let peerConnectionA;
let peerConnectionB;
let dataChannelA;
let dataChannelB;

const configuration = {
iceServers: [
{
urls: “stun:stun.relay.metered.ca:80”
},
{
urls: “turn:standard.relay.metered.ca:80”,
username: “”,
credential: “”,
},
],
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما متغیرها را برای نگهداری اتصالات همتا و کانال های داده خود اعلام می کنیم.
آرایه iceServers حاوی لیستی از سرورهای STUN/TURN است، شما می توانید با ایجاد یک حساب کاربری رایگان در Metered، آن را به دست آورید.

بعد ما ایجاد خواهیم کرد واقعی ایجاد خواهد کرد peerConnection اشیاء برای هر یک از کاربران ما و کانال های داده در آن اتصالات همتا.

peerConnectionA = new RTCPeerConnection(configuration);
peerConnectionB = new RTCPeerConnection(configuration);

// Create DataChannel on peer A and listen for it on peer B
dataChannelA = peerConnectionA.createDataChannel(“chat”);
setupDataChannel(dataChannelA, ‘A’);

peerConnectionB.ondatachannel = (event) => {
dataChannelB = event.channel;
setupDataChannel(dataChannelB, ‘B’);
};

function setupDataChannel(channel, user) {
channel.onopen = () => console.log(`Data channel for ${user} is open`);
channel.onmessage = (event) => receiveMessage(user, event.data);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در کد بالا یک کانال داده ایجاد می کنیم peerConnectionA و تنظیم آن برای کاربر A. The createDataChannel روش برای ایجاد یک کانال جدید استفاده می شود و نام آن را “چت” می گذاریم. را setupDataChannel سپس تابع برای تنظیم کانال داده برای کاربر A فراخوانی می شود.

روشن peerConnectionB، ما در حال راه اندازی یک شنونده رویداد برای ondatachannel رویداد این رویداد زمانی فعال می شود که یک RTCDataChannel توسط همتای راه دور به اتصال اضافه شود. کنترل کننده رویداد یک شی رویداد را دریافت می کند که از آن می توانیم کانال داده را دریافت کنیم (event.channel). سپس این کانال داده را برای کاربر B با استفاده از setupDataChannel تابع

به این ترتیب، ما در حال ایجاد یک کانال داده در یک اتصال همتا و راه اندازی یک شنونده برای آن در اتصال همتای دیگر هستیم. این به دو کاربر اجازه می دهد تا از طریق این کانال داده با هم ارتباط برقرار کنند.

// Here, we are exchanging ICE candidates between peer A and peer B.
// In this example, we are doing this directly because both peer connections are on the same page.
// However, in a real-world application, peer connections are likely to be on different computers.
// Therefore, instead of directly calling peerConnectionB.addIceCandidate, we would send the ICE candidate over a signalling server.
// The signalling server would then relay the ICE candidate to peer B, which is on a different computer.
// Upon receiving the ICE candidate from the signalling server, peer B would then add it to its peer connection.
peerConnectionA.onicecandidate = (event) => {
if (event.candidate) {
peerConnectionB.addIceCandidate(event.candidate);
}
};
peerConnectionB.onicecandidate = (event) => {
if (event.candidate) {
peerConnectionA.addIceCandidate(event.candidate);
}
};

// Create an offer from peer A and set up the connection
// this triggers the
const offer = await peerConnectionA.createOffer();
await peerConnectionA.setLocalDescription(offer);
await peerConnectionB.setRemoteDescription(offer);

const answer = await peerConnectionB.createAnswer();
await peerConnectionB.setLocalDescription(answer);
await peerConnectionA.setRemoteDescription(answer);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در کد بالا ما شنوندگانی برای کاندیداهای یخ ایجاد می کنیم و پیشنهاد و پاسخ را مبادله می کنیم تا ارتباط همتا به همتا برقرار کنیم. peerConnectionA و peerConnectionB

مرحله 3: ارسال و دریافت پیام

در مرحله بعد ما کد ارسال پیام را از طریق کانال داده اضافه می کنیم و کد را برای دریافت پیام از طریق کانال داده مدیریت می کنیم.

برای ارسال پیام می‌توانید به سادگی با روش ارسال روی آن تماس بگیرید datachannel شی

dataChannelA.send(data)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

function sendMessage(user) {
const input = document.getElementById(`input${user}`);
const message = input.value;
if (message) {
const data = JSON.stringify({ user, message });
if (user === ‘A’ && dataChannelA.readyState === “open”) {
dataChannelA.send(data);
displayMessage(‘A’, `A: ${message}`);
} else if (user === ‘B’ && dataChannelB.readyState === “open”) {
dataChannelB.send(data);
displayMessage(‘B’, `B: ${message}`);
}
input.value = ”;
}
}

function receiveMessage(user, data) {
const { user: sender, message } = JSON.parse(data);
displayMessage(user, `${sender}: ${message}`);
}

function displayMessage(user, message) {
const messageBox = document.getElementById(`messages${user}`);
const messageElement = document.createElement(‘p’);
messageElement.textContent = message;
messageBox.appendChild(messageElement);
messageBox.scrollTop = messageBox.scrollHeight;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

sendMessage: پیام را از طریق کانال داده ارسال می کند.
receiveMessage: پیام را در پنجره چت دریافت و نمایش می دهد.
displayMessage: DOM را برای نمایش پیام ها در پنجره چت به روز می کند.

مرحله 5: همه را کنار هم قرار دهید

در اینجا کد کامل قرار داده شده است

lang=”en”>

body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: row;
align-items: center;
padding: 20px;
}
.chat-windows {
display: flex;
justify-content: space-around;
width: 100%;
}
.chat-window {
width: 45%;
border: 1px solid #ccc;
padding: 10px;
}
.messages {
height: 300px;
overflow-y: auto;
border: 1px solid #eee;
margin-bottom: 10px;
padding: 10px;
}
input[type=”text”] {
width: 70%;
padding: 5px;
}
button {
padding: 5px 10px;
}
#debugInfo {
margin-top: 20px;
width: 100%;
height: 150px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px;
font-family: monospace;
}

style=”display:flex”>

let peerConnectionA;
let peerConnectionB;
let dataChannelA;
let dataChannelB;

const configuration = {
iceServers: [] };

async function initWebRTC() {
peerConnectionA = new RTCPeerConnection(configuration);
peerConnectionB = new RTCPeerConnection(configuration);

// Set up data channel on Peer A
dataChannelA = peerConnectionA.createDataChannel(“chat”);
setupDataChannel(dataChannelA, ‘A’);

// Receive data channel on Peer B
peerConnectionB.ondatachannel = (event) => {
dataChannelB = event.channel;
setupDataChannel(dataChannelB, ‘B’);
};

// Exchange ICE candidates
peerConnectionA.onicecandidate = (event) => {
if (event.candidate) {
peerConnectionB.addIceCandidate(event.candidate);
}
};
peerConnectionB.onicecandidate = (event) => {
if (event.candidate) {
peerConnectionA.addIceCandidate(event.candidate);
}
};

// Create offer from A and set local/remote descriptions
const offer = await peerConnectionA.createOffer();
await peerConnectionA.setLocalDescription(offer);
await peerConnectionB.setRemoteDescription(offer);

// Create answer from B and set local/remote descriptions
const answer = await peerConnectionB.createAnswer();
await peerConnectionB.setLocalDescription(answer);
await peerConnectionA.setRemoteDescription(answer);
}

function setupDataChannel(channel, localUser) {
channel.onopen = () => console.log(`Data channel for ${localUser} is open`);
channel.onmessage = (event) => receiveMessage(localUser, event.data);
}

function sendMessage(user) {
const input = document.getElementById(`input${user}`);
const message = input.value;
if (message) {
const data = JSON.stringify({ user, message });
if (user === ‘A’ && dataChannelA && dataChannelA.readyState === “open”) {
dataChannelA.send(data);
displayMessage(user, `${user}: ${message}`);
input.value=””;
} else if (user === ‘B’ && dataChannelB && dataChannelB.readyState === “open”) {
dataChannelB.send(data);
displayMessage(user, `${user}: ${message}`);
input.value=””;
}
}
}

function receiveMessage(localUser, data) {
const { user: fromUser, message } = JSON.parse(data);
displayMessage(localUser, `${fromUser}: ${message}`);
}

function displayMessage(user, message) {
const messagesDiv = document.getElementById(`messages${user}`);
const messageElement = document.createElement(‘p’);
messageElement.textContent = message;
messagesDiv.appendChild(messageElement);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

initWebRTC();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

 lang="en">

    
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 20px;
        }
        .chat-window {
            width: 45%;
            border: 1px solid #ccc;
            padding: 10px;
            margin-right: 10px;
        }
        .messages {
            height: 300px;
            overflow-y: auto;
            border: 1px solid #eee;
            margin-bottom: 10px;
            padding: 10px;
        }
        input[type="text"] {
            width: 70%;
            padding: 5px;
        }
        button {
            padding: 5px 10px;
        }
    


    
    

let peerConnectionA;
let peerConnectionB;
let dataChannelA;
let dataChannelB;

const configuration = {
    iceServers: [
       {
        urls: "stun:stun.relay.metered.ca:80"
       }, 
       {
            urls: "turn:standard.relay.metered.ca:80",
            username: "",
            credential: "",
        },
    ],
};

peerConnectionA = new RTCPeerConnection(configuration);
peerConnectionB = new RTCPeerConnection(configuration);

// Create DataChannel on peer A and listen for it on peer B
dataChannelA = peerConnectionA.createDataChannel("chat");
setupDataChannel(dataChannelA, 'A');

peerConnectionB.ondatachannel = (event) => {
    dataChannelB = event.channel;
    setupDataChannel(dataChannelB, 'B');
};

function setupDataChannel(channel, user) {
    channel.onopen = () => console.log(`Data channel for ${user} is open`);
    channel.onmessage = (event) => receiveMessage(user, event.data);
}

// Here, we are exchanging ICE candidates between peer A and peer B.
// In this example, we are doing this directly because both peer connections are on the same page.
// However, in a real-world application, peer connections are likely to be on different computers.
// Therefore, instead of directly calling peerConnectionB.addIceCandidate, we would send the ICE candidate over a signalling server.
// The signalling server would then relay the ICE candidate to peer B, which is on a different computer.
// Upon receiving the ICE candidate from the signalling server, peer B would then add it to its peer connection.
peerConnectionA.onicecandidate = (event) => {
    if (event.candidate) {
        peerConnectionB.addIceCandidate(event.candidate);
    }
};
peerConnectionB.onicecandidate = (event) => {
    if (event.candidate) {
        peerConnectionA.addIceCandidate(event.candidate);
    }
};

// Create an offer from peer A and set up the connection
// this triggers the 
const offer = await peerConnectionA.createOffer();
await peerConnectionA.setLocalDescription(offer);
await peerConnectionB.setRemoteDescription(offer);

const answer = await peerConnectionB.createAnswer();
await peerConnectionB.setLocalDescription(answer);
await peerConnectionA.setRemoteDescription(answer);

 dataChannelA.send(data)

function sendMessage(user) {
    const input = document.getElementById(`input${user}`);
    const message = input.value;
    if (message) {
        const data = JSON.stringify({ user, message });
        if (user === 'A' && dataChannelA.readyState === "open") {
            dataChannelA.send(data);
            displayMessage('A', `A: ${message}`);
        } else if (user === 'B' && dataChannelB.readyState === "open") {
            dataChannelB.send(data);
            displayMessage('B', `B: ${message}`);
        }
        input.value = '';
    }
}

function receiveMessage(user, data) {
    const { user: sender, message } = JSON.parse(data);
    displayMessage(user, `${sender}: ${message}`);
}

function displayMessage(user, message) {
    const messageBox = document.getElementById(`messages${user}`);
    const messageElement = document.createElement('p');
    messageElement.textContent = message;
    messageBox.appendChild(messageElement);
    messageBox.scrollTop = messageBox.scrollHeight;
}

 lang="en">


body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: row;
align-items: center;
padding: 20px;
}
.chat-windows {
display: flex;
justify-content: space-around;
width: 100%;
}
.chat-window {
width: 45%;
border: 1px solid #ccc;
padding: 10px;
}
.messages {
height: 300px;
overflow-y: auto;
border: 1px solid #eee;
margin-bottom: 10px;
padding: 10px;
}
input[type="text"] {
width: 70%;
padding: 5px;
}
button {
padding: 5px 10px;
}
#debugInfo {
margin-top: 20px;
width: 100%;
height: 150px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px;
font-family: monospace;
}


 style="display:flex">

 


 هم‌رسانی

 فیس بوک


 توییتر (X)


 لینکدین


 ‫تامبلر


 ‫پین‌ترست


 ‫رددیت


 ‫VKontakte


 ‫Odnoklassniki


 پاکت


 رایانامه


 چاپ