dixyes/hls.html

## hls.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>HLS Player</title>
    <link href="/css/DPlayer.min.css" rel="stylesheet">
</head>
<body>
<div id="player1" class="dplayer"></div>
<script src="/js/DPlayer.min.js"></script><!-- Dplayer 2.0, using master branch -->
<script src="/js/hls.min.js"></script>
<script src="/js/mqtt.min.js"></script><!-- browsefied mqttjs -->
<script src="/js/msgpack.min.js"></script><!-- msgpack-lite -->

<script>
const wssvr='ws://somehost/ws',dmp='dmpool_1';
var mqttclient  = mqtt.connect(wssvr);

mqttclient.on('connect', function () {
  console.log('logtin');
  mqttclient.subscribe(dmp);
})

var mqttbe = {
    send: (endpoint, danmakuData) => {
        console.log(danmakuData);
        var msgData=msgpack.encode({
          'text':danmakuData['text'],
          'color':danmakuData['color'],
          'type':danmakuData['type'],
          'from':mqttclient.options.clientId
        });
        //console.log(msgData);
        mqttclient.publish(dmp, msgData);
    },

    read: (endpoint, cbk) => {
        cbk(null, []);
    }
};
var dp = new DPlayer({
    element: document.getElementById('player1'),                       // Optional, player element
    autoplay: true,                                                   // Optional, autoplay video, not supported by mobile browsers
    theme: '#FADFA3',                                                  // Optional, theme color, default: #b7daff
    loop: false,                                                        // Optional, loop play music, default: true
    lang: 'zh',                                                        // Optional, language, `zh` for Chinese, `en` for English, default: Navigator language
    screenshot: true,                                                  // Optional, enable screenshot function, default: false, NOTICE: if set it to true, video and video poster must enable Cross-Origin
    hotkey: true,                                                      // Optional, binding hot key, including left right and Space, default: true
    preload: 'auto',                                                   // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    video: {                                                           // Required, video info
        url: "http://somehost/hls/movie.m3u8",                  // Required, video link
        type: 'auto'                                                   // Optional, video type, `flv` for flv format, `hls` for m3u8 format, `normal` for mp4 ogg and webm format, `auto` for automatic detection, default: `auto`
    },
    apiBackend: mqttbe,
    danmaku: {                                                         // Optional, showing danmaku, ignore this option to hide danmaku
        id: 'typenonesencehere',                                        // Required, danmaku id, NOTICE: it must be unique, can not use these in your new player: `https://api.prprpr.me/dplayer/list`
        api: 'localhost',                         // Required, danmaku api
    }
});
mqttclient.on('message', function (topic, message) {
  // message is Buffer
  if(topic===dmp){
    //console.log('got',message.toString());
    var dm=msgpack.decode(message);
    if(mqttclient.options.clientId!==dm.from)
      dp.pushDanmaku(dm.text, dm.color, dm.type);
  }
})
</script>
</body>

</html>

## mqttsvr.js
var mosca = require('mosca')

var moscaSettings = {
  http: {
    port: 3000, //any port here, i'm using nginx to proxy
    bundle: true,
    static: './'
  },
  port: 1883,
  id: "simpsvr",
  //stats: true,
  logger: {
    level: 'info'
  },
  backend: {
    type: 'redis',
    port: 7000,
    host: 'localhost',
    return_buffers: true
  },
  persistence: {
    factory: mosca.persistence.Redis,
    port: 7000,
    host: 'localhost'
  },
};

var server = new mosca.Server(moscaSettings);

server.on('clientConnected', function(client) {
    console.log('client connected', client.id);
});

server.on('published', function(packet, client) {
  console.log('Published', packet.payload);
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>HLS Player</title>
	<link href="/css/DPlayer.min.css" rel="stylesheet">
	</head>
	<body>
	<div id="player1" class="dplayer"></div>
	<script src="/js/DPlayer.min.js"></script><!-- Dplayer 2.0, using master branch -->
	<script src="/js/hls.min.js"></script>
	<script src="/js/mqtt.min.js"></script><!-- browsefied mqttjs -->
	<script src="/js/msgpack.min.js"></script><!-- msgpack-lite -->

	<script>
	const wssvr='ws://somehost/ws',dmp='dmpool_1';
	var mqttclient = mqtt.connect(wssvr);

	mqttclient.on('connect', function () {
	console.log('logtin');
	mqttclient.subscribe(dmp);
	})

	var mqttbe = {
	send: (endpoint, danmakuData) => {
	console.log(danmakuData);
	var msgData=msgpack.encode({
	'text':danmakuData['text'],
	'color':danmakuData['color'],
	'type':danmakuData['type'],
	'from':mqttclient.options.clientId
	});
	//console.log(msgData);
	mqttclient.publish(dmp, msgData);
	},

	read: (endpoint, cbk) => {
	cbk(null, []);
	}
	};
	var dp = new DPlayer({
	element: document.getElementById('player1'), // Optional, player element
	autoplay: true, // Optional, autoplay video, not supported by mobile browsers
	theme: '#FADFA3', // Optional, theme color, default: #b7daff
	loop: false, // Optional, loop play music, default: true
	lang: 'zh', // Optional, language, `zh` for Chinese, `en` for English, default: Navigator language
	screenshot: true, // Optional, enable screenshot function, default: false, NOTICE: if set it to true, video and video poster must enable Cross-Origin
	hotkey: true, // Optional, binding hot key, including left right and Space, default: true
	preload: 'auto', // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
	video: { // Required, video info
	url: "http://somehost/hls/movie.m3u8", // Required, video link
	type: 'auto' // Optional, video type, `flv` for flv format, `hls` for m3u8 format, `normal` for mp4 ogg and webm format, `auto` for automatic detection, default: `auto`
	},
	apiBackend: mqttbe,
	danmaku: { // Optional, showing danmaku, ignore this option to hide danmaku
	id: 'typenonesencehere', // Required, danmaku id, NOTICE: it must be unique, can not use these in your new player: `https://api.prprpr.me/dplayer/list`
	api: 'localhost', // Required, danmaku api
	}
	});
	mqttclient.on('message', function (topic, message) {
	// message is Buffer
	if(topic===dmp){
	//console.log('got',message.toString());
	var dm=msgpack.decode(message);
	if(mqttclient.options.clientId!==dm.from)
	dp.pushDanmaku(dm.text, dm.color, dm.type);
	}
	})
	</script>
	</body>

	</html>
	var mosca = require('mosca')

	var moscaSettings = {
	http: {
	port: 3000, //any port here, i'm using nginx to proxy
	bundle: true,
	static: './'
	},
	port: 1883,
	id: "simpsvr",
	//stats: true,
	logger: {
	level: 'info'
	},
	backend: {
	type: 'redis',
	port: 7000,
	host: 'localhost',
	return_buffers: true
	},
	persistence: {
	factory: mosca.persistence.Redis,
	port: 7000,
	host: 'localhost'
	},
	};

	var server = new mosca.Server(moscaSettings);

	server.on('clientConnected', function(client) {
	console.log('client connected', client.id);
	});

	server.on('published', function(packet, client) {
	console.log('Published', packet.payload);
	});