GoEasy实现弹幕效果

1、核心js代码如下!所有客户端都可以看见同一频道上的弹幕消息

        var subscribed = false;
        var goeasy = new GoEasy({
            appkey: "GoEasy上面的appkey",
        });
        
        function subscriber() {
            goeasy.subscribe({
                channel: "systemInfo",
                onMessage: function (data) {
                    youSelfBarrageMsg(data.content,'70%');
                }
            });
        }

        function publishMessage() {
            var publishMessage = document.getElementById("danmuInput");
            goeasy.publish({
                channel: "systemInfo",
                message: publishMessage.value
            });
            publishMessage.value = "";
        }
        var entityMap = {
            "&": "&",
            "<": "&lt;",
            ">": "&gt;",
            '"': '&quot;',
            "'": '&#39;',
            "/": '&#x2F;'
        };

        function escapeHtml(string) {
            return String(string).replace(/[&<>"'\/]/g, function (s) {
                return entityMap[s];
            });
        }

        function youSelfBarrageMsg(message, left) {
            var colorText = getRandomColor();
            var topPos = parseInt(Math.random() * 350);
            //此处给label加一个外层边框区别与其他
            var newText = '<label style="border:1px solid red;position:absolute; top:' + topPos + 'px;left:' + left + '; color:' + colorText + '">' + message + '</label>';
            $("#danmuShow").append(newText);
            var label = $("label:last");
            label.stop().animate({left: '-50px'}, 9000, "linear", function () {
                $(this).remove();
            });
        }

        function getRandomColor() {
            return '#' + (function (h) {
                        return new Array(7 - h.length).join("0") + h
                    })((Math.random() * 0x1000000 << 0).toString(16))
        }

        function initBarrageMsg(message, left) {
            var colorText = getRandomColor();
            var topPos = parseInt(Math.random() * 350);
            var newText = '<label style="position:absolute; top:' + topPos + 'px;left:' + left + '; color:' + colorText + '">' + message + '</label>';
            $("#danmuShow").append(newText);
            var label = $("label:last");
            label.stop().animate({left: '-50px'}, 5000, "linear", function () {
                $(this).remove();
            });
        }

        $(function () {
            subscriber();
            $("#danmuButton").bind("click",function(){
                publishMessage();
                });
        });

和后台JAVA没有任何关系,只要GoEasy上面有自己创建的APP就可以,使用appkey可以进行连接

猜你喜欢

转载自blog.csdn.net/w123452222/article/details/73499626