web application များတွင် Real-time chat function ကိုအကောင်အထည်ဖော်ရန် WebSound အသုံးပြုနည်း

ယေဘုယျအမြင်

မျက်မှောက်ခေတ် web applications များတွင် Real-time chat function သည်ဘုံလိုအပ်ချက်ဖြစ်လာသည်။ အချိန်နှင့်တပြေးညီလိုအပ်ချက်များကိုဖြည့်ဆည်းနိုင်ရန်အတွက်ရိုးရာ HTTP protocol သည်မသမာပါ။ Webscrapually-webscupual သည်အပြည့်အဝ duplex ဆက်သွယ်ရေး protocol တစ်ခုအနေဖြင့်အနိမ့်အမြင့်ဆုံးဆက်သွယ်ရေးပြဌာန်းချက်နှင့်စွမ်းဆောင်ရည်နိမ့်ကျခြင်းနှင့်စွမ်းဆောင်ရည်နိမ့်ကျခြင်းကိုပေးနိုင်သည်။

0 က်ဘ်ဆိုက်အသစ်တစ်ခုသည် HTML5 တွင်ထပ်မံတိုးချဲ့သောနည်းပညာအသစ်တစ်ခုကိုနည်းပညာအသစ်များထည့်သွင်းထားပြီး၎င်းသည်ဖောက်သည်များနှင့်ဆာဗာများအကြားဆက်နွယ်မှုရှိသည်။ ရိုးရာ HTTP protocol နှင့်နှိုင်းယှဉ်လျှင်၎င်းသည်အချိန်နှင့်တပြေးညီစွမ်းဆောင်ရည်မြင့်မားသည်သာမက Bandwidth သုံးစွဲမှုကိုလည်းလျှော့ချပေးရုံသာမက bandwidth သုံးစွဲမှုကိုလည်းလျော့နည်းစေသည်။

Front-end ကုဒ်အကောင်အထည်ဖော်မှု

ပထမ ဦး စွာကျွန်ုပ်တို့သည်ရှေ့တန်းတွင်ဝက်ဘ်ဆိုက်အရာဝတ်ထုတစ်ခုကိုဖန်တီးရန်နှင့်ဆာဗာနှင့်ဆက်သွယ်မှုကိုတည်ဆောက်ရန်လိုအပ်သည်။ ဒီမှာရိုးရှင်းတဲ့ရှေ့တန်းကုဒ်ကဥပမာတစ်ခုပါ။

 const socket = new WebSocket('ws://localhost:8000/chat');

// အောင်မြင်သောဆက်သွယ်မှုတည်ထောင်ပြီးနောက် callback function ကို
socket.onopen = function() {
    console.log('WebSocketဆက်သွယ်မှုကိုထူထောင်ထားသည်');
};

// မက်ဆေ့ခ်ျကိုလက်ခံရရှိသည့်အခါ callback function ကို
socket.onmessage = function(event) {
    const message = JSON.parse(event.data);
    console.log('မက်ဆေ့ခ်ျကိုလက်ခံရရှိခဲ့သည်：', message);
};

// connection ကိုပိတ်သည့်အခါ callback function ကို
socket.onclose = function() {
    console.log('WebSocketဆက်သွယ်မှုပိတ်ထားသည်');
};

// မက်ဆေ့ခ်ျများပို့ခြင်းအတွက်လုပ်ဆောင်ချက်များကို
function sendMessage(message) {
    socket.send(JSON.stringify(message));
}

ဤကုဒ်သည်ဝက်ဘ်ဆိုက်များမှတစ်ဆင့်ဆာဗာနှင့်ဆက်သွယ်မှုကိုအကောင်အထည်ဖော်သည်။ ဆက်သွယ်မှုအောင်မြင်သောအခါ `Onopen` ဖြစ်ရပ်ကိုဖြစ်ပေါ်လာသည်။ ဆာဗာမက်ဆေ့ခ်ျကိုလက်ခံရရှိသည့်အခါ `onmessage` ဖြစ်ရပ်ကိုဖြစ်ပေါ်လာသည်။ ဆက်သွယ်မှုကိုပိတ်လိုက်သည့်အခါ `Oncocoe` ဖြစ်ရပ်ကိုဖြစ်ပေါ်စေသည်။

backend ကုဒ်အကောင်အထည်ဖော်မှု

ထို့နောက်ကျွန်ုပ်တို့သည် server-side ဝက်ဘ်ဆိုက်များပြုပြင်ခြင်းယုတ္တိဗေဒကိုအကောင်အထည်ဖော်မည်။ WS` WS` `စာကြည့်တိုက်ကို Node.Js ကို သုံး. MJOST server တစ်ခုဖန်တီးရန်။ ဤတွင် backend ကုဒ်ဥပမာတစ်ခုမှာ -

 const WebSocket = require('ws');

// ဖန်တီးWebSocketဆာဆာ
const wss = new WebSocket.Server({ port: 8000 });

// 保存所有连接到ဆာဆာ的客户端
const clients = new Set();

// Client Connection ဖြစ်ရပ်များကိုကိုင်တွယ်ပါ
wss.on('connection', function(ws) {
    console.log('client ကိုချိတ်ဆက်ထားသည်');
    // collection ကို convers ကိုထည့်ပါ
    clients.add(ws);

    // 处理မက်ဆေ့ခ်ျကိုလက်ခံရရှိခဲ့သည်的事件
    ws.on('message', function(message) {
        console.log('မက်ဆေ့ခ်ျကိုလက်ခံရရှိခဲ့သည်：', message);
        // ဆက်သွယ်ထားသော clients အားလုံးကိုမက်ဆေ့ခ်ျများပို့ပါ
        clients.forEach(function(client) {
            client.send(message);
        });
    });

    // ဆက်သွယ်မှုပိတ်ခြင်းဖြစ်ရပ်ကိုကိုင်တွယ်ပါ
    ws.on('close', function() {
        console.log('client ကိုပိတ်ထားသည်');
        // စုဆောင်းမှုမှ client ကိုဖယ်ရှားပါ
        clients.delete(ws);
    });
});

ဆာဗာဘေးထွက်ကုဒ်သည် port 8000 ကိုနားထောင်ခြင်းဖြင့် ws` ws` library ကိုနားထောင်ပြီးဝက်ဘ်ဆိုက်ဆာဗာကိုဖန်တီးသည်။ client connection တစ်ခုရှိတိုင်း 0 န်ဆောင်မှုခံယူသူတစ် ဦး သည် client ကိုစုဆောင်းပြီး 0 န်ဆောင်မှုခံယူသူများအား 0 န်ဆောင်မှုပေးသည်။

စတင်ပါ

ရှေ့ဆုံးကုဒ်ကို index.html ဖိုင်အဖြစ်သိမ်းဆည်းပြီး back-end code ကို server.js ဖိုင်တစ်ခုအဖြစ်သိမ်းဆည်းပါ။ WebSound ဆာဗာကိုစတင်ရန်အောက်ပါ command ကို run ပါ။

 node server.js

ထို့နောက်သင်၏ browser တွင် `index.html` ဖိုင်ကိုဖွင့်ပါ။ browser's developer tools များမှတဆင့်ဆက်သွယ်မှုများနှင့်မက်ဆေ့ခ်ျများကိုပေးပို့ခြင်းနှင့်လက်ခံခြင်းကိုသင်လေ့လာနိုင်သည်။

အကျဉ်းချုပ်

အထက်ပါဥပမာနှင့်အတူကျွန်ုပ်တို့သည် websocket protocol ကို သုံး. web applications များတွင်အချိန်နှင့်တပြေးညီ chat လုပ်ဆောင်နိုင်စွမ်းကိုမည်သို့အကောင်အထည်ဖော်ရမည်ကိုသရုပ်ပြသည်။ ၎င်းသည်အခြေခံဥပမာတစ်ခုဖြစ်သော်လည်း၎င်းသည်အချိန်နှင့်တပြေးညီဝက်ဘ်ဆိုက်များ၏အားသာချက်များကိုပြသသည်။ အမှန်တကယ်လိုအပ်ချက်များပေါ် မူတည်. developer များကမက်ဆေ့ခ်ျသိုလှောင်ခြင်း, လုံခြုံရေး, အသုံးပြုသူစစ်မှန်ကြောင်းမက်ဆေ့ခ်ျများကဲ့သို့သောလုပ်ဆောင်မှုများကိုထပ်မံတိုးချဲ့နိုင်သည်။

Websons သည်အချိန်နှင့်တပြေးညီ application များကိုပိုမိုထိရောက်စွာအဆင်ပြေစေပြီးအဆင်ပြေချောမွေ့စေသည်။ အင်္ဂါရပ်အသစ်များကိုစဉ်ဆက်မပြတ်ပိုမိုကောင်းမွန်စေရန်နှင့်ပေါင်းထည့်ခြင်းအားဖြင့်ပိုမိုရှုပ်ထွေးပြီးအပြည့်အဝအလုပ်လုပ်သောတိုက်ရိုက်စကားပြောသော application များကိုတည်ဆောက်နိုင်သည်။