HTML5之廣播聊天室

- 服務器端廣播文本
- 所有客戶端都可以收到

--- 客戶端

- 定義文本框
- 定義發送事件
textarea accesskey =t oninput="sendmsg();"
- 發送協議
ws:// 普通web-socket
wss:// 加密web-socket

客戶端-創立連接

var ws,currentUser,ele;
window.onload = function() {
    ws = new  WebSocket("ws://my server:8887");

    // 連接建立成功onopen事件會被調用
    ws.onopen = function() {
    $("status").innerHTML =  'online';
    $("status").style.color =  'green';

    // 消息接受成功會喚起消息
    ws.onmessage =  function(e) {
    var msg;
    try  {
        msg =  JSON.parse(e.data);
    } catch  (SyntaxError) {
        $("debug").innerHTML = "invalid message";
        return false;
    }
}

客戶端-發送消息

function sendmsg()  {
    ws.send($("ta").value);
}
// 關閉事件
ws.onclose =  function(e){
    $("status").innerHTML =  'offline';
    $("status").style.color =  'red';
};

window.onunload = function(){
    ws.close();
};

服務器端-創建連接

var ws = require(__dirname + '/lib/ws'),
server = ws.createServer();
var user_cols = {};
server.addListener ("connection",  function(conn)  {
    var h  = conn._server.man ager.length*70;
    // 使用不同顏色標注用戶ID
    user_cols[conn.id]  = "hsl("+h+",100%,30%)";
    var msg =  {};
    msg.user = conn.id;
    msg.color = user_cols[conn.id];
    msg.text = "<em>一個新的用戶加入聊天！</em>";
    // 廣播
    conn.broadcast(JSO N.stringify(msg));
}

服務器端-監聽廣播

conn.addListener("message",  function(message) {
    var msg =  {};
    // 防注入處理
    message  = message.replace(/</g, "&lt;");
    message  = message.replace(/>/g, "&gt;");
    msg.text = message;
    msg.user = conn.id;
    msg.color = user_cols[conn.id];
    // 輸出內容
    conn.write(JSON.st ringify(msg));
    // 廣播
    conn.broadcast(JSO N.stringify(msg));
    });
});

服務器端-關閉

server.addListener("close",  function(conn)  {
    var msg =  {};
    msg.user = conn.id;
    msg.color = user_cols[conn.id];
    msg.text = "<em>一個用戶已經離開了聊天！</em>";
    conn.broadcast(JSO N.stringify(msg));
});
server.listen(8887);