Recently, I made a demand for H5 live broadcast. At that time, I wasted a lot of time in the message display, and finally failed to achieve the ideal effect. So recently, in my spare time, I wrote this component of mobile terminal live message display, which is called mobile-live-message

Mobile – live – the message online DEMO

I open source this time is the message display component mobile-live-message, with it, when writing live H5 will save a lot of heart?

Start by introducing my component

The function point

(1) Messages can be sent single or multiple at a time

(2) The message enters with gradient animation

(3) Message content supports custom HTML

(4) Automatically close scrolling to the latest news when browsing history

(5) Translucency of the top of the message area

implementation

The component itself has only 80 lines of code, a constructor liveMessage, and a message-sending function send. There’s really not much to talk about, so you can take 5 minutes to read it if you’re interested; Attached code, this article mainly introduces the main use

(function (win, doc) {
    "use strict";
    function liveMessage(container, options) {
        if(! container) { throw'parent element is null'
        }
        var myParentEle = document.createElement('div');
        myParentEle.className = 'mobile-live-message-box';
        myParentEle.style.width = '100%';
        myParentEle.style.height = '100%';
        myParentEle.style.overflow = 'auto';
        container.appendChild(myParentEle)
        var contentBox = document.createElement('div');
        contentBox.className = 'mobile-live-message-content-box'; myParentEle.appendChild(contentBox); this.parentElement = contentBox; this.options = {... options}; this.stopScroll =false;
        myParentEle.addEventListener('touchend', (e) => {
            var bottomLen = Math.abs(myParentEle.scrollTop - (contentBox.offsetHeight - myParentEle.offsetHeight));
            if (bottomLen > 30) {
                console.log('Stop auto scroll bottom')
                this.stopScroll = true;
                setTimeout(() => {
                    this.stopScroll = false; }}, 50000)else {
                console.log('Scroll on')
                this.stopScroll = false;
            }
        })
    }

    liveMessage.prototype.send = function (data) {
        var div = document.createElement('div');
        div.className = 'mobile-live-message-item'
        let str = ' ';
        if (data instanceof Array) {
            for (let index = 0; index < data.length; index++) {
                const mesItem = data[index];
                let content = mesItem;
                if (mesItem instanceof Object) {
                    content = mesItem.text;
                }
                if (this.options.format) {
                    content = this.options.format(mesItem);
                }
                str += `<div class="mobile-live-message-item-text">${content}</div>`
            }
        } else if (data instanceof Object) {
            let content = data.text;
            if (this.options.format) {
                content = this.options.format(data)
            } 
            str = `<div class="mobile-live-message-item-text">${content}</div>`
        } else {
            str = `<div class="mobile-live-message-item-text">${data || ''}</div>`
        }
        div.innerHTML = str;
        this.parentElement.appendChild(div);
        if (this.stopScroll) {
            return;
        }
        this.parentElement.parentElement.scroll({ top: div.offsetTop, left: 0, behavior: 'smooth'}); } // smoothScroll polyfill // skip the smoothScroll polyfill source code, you can go to Github to view all the codeif(typeof module ! = ='undefined' && module.exports) {
      module.exports = liveMessage;
    };
    if (typeof define === 'function') define(function() { 
      return liveMessage; 
    });
    win.liveMessage = liveMessage;
 })(window, document)
Copy the code

Smoothscroll Polyfill animation plugin for smoothScroll Polyfill

Installing a plug-in

//npm
npm i mobile-live-message --save;
//cdn
<script src="./src/lib/index.js"></script>

Copy the code

Initialize the plug-in

var parentBox = document.querySelector('#container')
var Mes = new liveMessage(parentBox,{})
Copy the code

Send a single message

var mesStr = 'hello';
var mesObj = {
    text: 'hello'
}
Mes.send(mesStr);
Mes.send(mesObj);
Copy the code

If the message is in the format of an object, the plug-in will read the text field by default.

Sending multiple messages

var mesArrayStr = ['hello'.'hello'];
var mesArrayObj = [
    {
        text: 'hello'
    },
    {
        text: 'hello'
    }
]
Mes.send(mesArrayStr);
Mes.send(mesArrayObj);
Copy the code

Message customization

You can pass in the fotmat parameter when initializing the plug-in, as follows

var Mes = new liveMessage(parentBox, {
    format: function(mesItem) {
        if (mesItem.type === 'rocket') {
            return `<img src="${RocketIcon}" class="icon icon-rocket"/><span>${mesItem.text}</span>`
        } else if (mesItem.type === 'flower') {
            return `<img src="${FlowerIcon}" class="icon icon-flower"/><span>${mesItem.text}</span><img src="${FlowerIcon}" class="icon icon-flower"/ > `}else if (mesItem.type === 'face') {
            return `<img src="${FaceIcon}" class="icon icon-face"/><span>${mesItem.text}</span>`
        }
        
    }
});
 var data = [
            {
                type: 'rocket',
                text: 'Fly a little rocket'
            }
        ]
Mes.send(data);
Copy the code

Then you need to write your message styles outside the plugin. The plugin does not interfere with the styles because there are so many different styles that there is no uniformity.

Finally attached github source github.com/ColdDay/mob…

Due to the author’s limited level, there may be code or implementation problems, welcome to point out, thank you

If it helps you, give it a Star