外挂弹幕系统

在页面中实现类似直播的弹幕系统

// ==UserScript==
// @name         外挂弹幕系统
// @namespace    https://tool.zcmzcm.org/webBarrage/
// @version      0.1
// @description  在页面中实现类似直播的弹幕系统
// @author       张城铭
// @include        *
// @grant        none
// ==/UserScript==

((dom) => {
    if(lock)return;
    let webBarrage = {
        style: 'https://cdn.zcmzcm.org/css/webBarrage/style.css',
        danmu: 'https://cdn.zcmzcm.org/js/webBarrage/jquery.barrager.min.js',
        jquery: 'https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js',
        server: 'wss://tool.zcmzcm.org/webBarrage',
        session_id: 'https://tool.zcmzcm.org/user/session_id',
        init: function() {
            let jq
            ,c = (e) => {return dom.createElement(e)}
            ,a = (e) => {return dom.body.appendChild(e)}
            ,danmujs = c('script')
            ,send = c('div')
            ,style = c('link')
            ,load = async () => {
                // org暂时无法备案,无法申请QQ登录
                this.session_id = await this.getSessionId();
                danmujs.src = this.danmu,a(danmujs);
                danmujs.onload = () => {
                    this.connect();
                }
            }

            style.rel = 'stylesheet';
            style.href = this.style,a(style);
            danmujs.charset = 'utf-8';
            jq = danmujs.cloneNode();
            jq.src = this.jquery;
            jq.onload = load;

            window.jQuery && load() || a(jq)

            send.id = 'barrageSend';a(send);
            send.innerHTML = `<div id="wb_speak"><input/><span>回车发送</span></div>`;
        },
        connect: function() {
            let ws = new WebSocket(this.server, [this.session_id.data]);
            ws.onopen = (evt) => {
                console.log('连接到服务器');
                $('#wb_speak>input').focus();
            };
            ws.onclose = (evt) => {
                console.log('服务器断开连接');
            };
            ws.onmessage = (evt) => {
                let data = JSON.parse(evt.data),
                item = {
                   //img: data.avatar, //图片
                   info: data.text,        //文字
                   //href:'http://www.yaseng.org', //链接
                   //close:true, //显示关闭按钮
                   //speed:8, //延迟,单位秒,默认8
                   //bottom:70, //距离底部高度,单位px,默认随机
                   //color:'#fff', //颜色,默认白色
                   //old_ie_color:'#000000', //ie低版兼容色,不能与网页背景相同,默认黑色
                }
                $('body').barrager(item);
            };
            ws.onerror  = (evt, e) => {
                console.log('Error occured: ' + evt.data);
            };
            $('#wb_speak>input').bind('keydown', function(e){
                if (e.keyCode == 13){
                    if (! $(this).val()) return false;
                    ws.send($(this).val());
                    $(this).val('');
                }
            });
        },
        getSessionId: async function() {
            return (await fetch(this.session_id, {method: "GET",credentials:"include", mode: "cors", headers: {"Content-Type": "application/x-www-form-urlencoded"},})).json();
        },
    }
    webBarrage.init();
})(document);
var lock = true;