使用Firebase.js实现的聊天室实例演示

Chat Room Demo

聊天

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2630
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var myDataRef = new Firebase('https://g08x5yt6vu1.firebaseio-demo.com/');

$('#m').keypress(function(e) {
    if (e.keyCode == 13) {
        addMessage();
    }
});

myDataRef.on('child_added', function(snapshot) {
    var message = snapshot.val();
    displayChatMessage(message.name, message.text);
});

function addMessage() {
    var name = $('#n').val();
    var text = $('#m').val();

if (/^\s*$/.test(name)) {
        name = "(anonymous)";
    }

if (/^\s*$/.test(text)) {
        // only whitespace or empty string
    } else {
        myDataRef.push({
            name: name,
            text: text
        });
    }

$('#m').val('');
}

function displayChatMessage(name, text) {
    if (name === '(anonymous)') {
        $('<div class="out-row" />').prepend($('<span class="out-message"/>')).text(text).prepend($('<div class="anon"/>')).appendTo($('#msg'));
    } else {
        $('<div class="out-row" />').prepend($('<span class="out-message"/>')).text(text).prepend($('<span class="out-name"/>').text(name + ': ')).appendTo($('#msg'));
    }

$('#msg')[0].scrollTop = $('#msg')[0].scrollHeight;
};

编译

CSS

h2 {
    font-family: sans-serif;
}
input {
    padding: 10px 4px;
}
#controls {
    padding: 4px 10px 20px 10px;
    background: #dadada;
}
#go {
    padding: 10px 20px;
}
#n {
    width: 10%;
}
#m {
    width: 40%;
}
#msg {
    border-top: 1px dotted #ccc;
    padding-top: 6px;
    margin-top: 6px;
}
.out-row {
    font-family: courier;
    font-size: 18px;
    border-bottom: 1px dotted #ccc;
    padding-left: 16px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    line-height: 40px;
}
.out-name {
    text-transform: capitalize;
    color: #999;
}
.anon {
    display: inline-block;
    float: left;
    margin-right: 10px;
    width: 32px;
    height: 32px;
    background-image: url('data:image/gif;base64,R0lGODlhIAAgAOMQAIWHhI6QjZeZlqGin6qsqbO1sru9ucHDwMfJxtHT0Nnb2OPl4uvt6vP18vv9+v3//CH+OUNSRUFUT1I6IGdkLWpwZWcgdjEuMCAodXNpbmcgSUpHIEpQRUcgdjYyKSwgcXVhbGl0eSA9IDkwCgAsAAAAACAAIAAABP7wPSenpDZXvTHOn9SM41Z51/RhzYIUxCAIQ5EwqmmhVKMYhELBQCzIAAEDjgOqMIC31ImBEAQSzBRlUTg0pLqRAaBrPgbK5orCWAjMnUfX8mWSGAVUds5IHBILU34HCw0IZSYOBF5+A0gJW44CBggLC3onKmhOBwIEDA4HAQUKXyNLOWABhw8kCAZfCUojFA6BtYkSVw8JMAcIBAq2LgQEaQNaGg4OqwkBAEhQEgoDAdYIDAEhtR8DCArfCgoLBKxtlgsMDQEXessSBhoN5VIe7JlxZ6AVC96IqKl0CKh0bgyWBuoucFm2ooyAA+UaJIhxsBCDHwTe5NNTQ8gIcIGBMhhDcI9HvgHUHvYS4gWPsQPJEOn6ZQTaECQBgih4EwIOhgETE4BTIMuAgj7xduCS6cDAgQJt1JWwxDMLIgcqHzAgEEBBq60yw0oYYDEjKIlkeorFVUCilQQ+2KkVm2HUGABOq9LV8SEnkoxz94KBBi2XYGUPiBL1EDjsNjgyIwAAOw==');
}

HTML

Chat Room Demo

聊天

编辑器支持Emmet

快捷键

Chat Room Demo

聊天

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：