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);

本文地址：https://www.xunjs.com/htmlcss/view_10722.html

Tags：聊天室 Html5