首页 > 代码库 > HTML5之广播聊天室

HTML5之广播聊天室

2024-10-22 23:44:02   202人阅读

- 服务器端广播文本
- 所有客户端都可以收到

--- 客户端

- 定义文本框
- 定义发送事件
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);

 

HTML5之广播聊天室


联系
我们