Logmessages HTML / JS的文本框

Question

在创建自己的解决方案之前，我尝试找到一些已经满足我需求的东西。 我有一个node.js服务器，其中有多个客户端/应用程序连接到该服务器。 这些客户端会将日志消息发送到服务器，我想在面板中显示该消息。

现在，我需要一些用于Logmessages的典型多行文本框的功能 ：

• 我需要能够附加日志消息，因为它们将通过websockets定期发送
• 除非用户选择文本或向上滚动，否则它应该自动向下滚动
• 它应该能够使用颜色和粗体/常规

我的问题：

上面的用例已经有解决方案了吗？

Answer 1

我可以举一个例子吗？ 它曾经是一个textarea但我将其重构为一个div ，几乎没有代码更改。

代码的一些重点，可以在github上找到

一个自定义函数，用于发送日志消息 ：

/**
 * Add a message to the gamelog
 * @param {Object} options : allows custom output
 * @param {String} options.message : the message to display
 * @param {Boolean} options.isTimed : does the message has a timestamp in front of it?
 * @param {Boolean} options.isError : is the message an error?
 * @param {Boolean} options.isNewline : start the message on a new line
 */
addMessage: function (options) {
    var instance = ns.instance,
        audio = instance.audio,
        audiofx = audio.settings.fx,
        history = this.areaMessage.html();

    // isTimed?
    options.message = options.isTimed
        ? history + this.fieldClock.val() + ': ' + options.message
        : history + options.message;

    // isNewline?
    if (options.isNewline) {
        options.message = options.message + '<br />';
    }

    // message
    this.areaMessage.html(options.message);
    this.scrollTop(this.areaMessage);

    // isError?
    if (options.isError) {
        audio.play(audiofx.error);
    }
},

滚动到顶部功能：

/**
 * Automatically scroll down (from the top)
 * @param {Object} target : jQuery object
 */
scrollTop: function (target) {
    target.scrollTop(99999);
    target.scrollTop(target.scrollTop() * 12);
}

要使用彩色消息，您应该能够使用HTML字符串：

log.addMessage({
    message: '<span style="color: red;">[ERROR]</span>&nbsp;',
    isNewLine: false
});

log.addMessage({
    message: 'the rest of the error message',
    isNewLine: true
});

随意使用此想法来注册您自己的自定义消息框。