const app = require('http').createServer(handler);
const io = require('socket.io')(app);
app.listen(80);
function handler(req, res) {
  // your handler...
}
io.on('connection', socket => {
  socket.on('danmaku', comment => {
    socket.broadcast.emit('danmaku', comment);
  });
});

var danmaku = new Danmaku();
danmaku.init({
  // The stage to display comments will be appended to container.
  container: document.getElementById('my-container'),

  // Danmaku will create a container automatically and append video to the
  // container if container isn't assigned.
  video: document.getElementById('my-video'),

  // You should always assign a container when using audio mode.
  audio: document.getElementById('my-audio'),

  // Array of comment, you can find its format in `danmaku.emit` API.
  comments: [],

  // You can use 'DOM' engine or 'canvas' engine to render comments.
  // Canvas engine may more efficient than DOM however it costs more memory.
  // 'DOM' by default, available in all mode.
  engine: 'canvas',

  // You can also set speed by using `danmaku.speed` API.
  speed: 144
});

var danmaku = new Danmaku({/* options */});

danmaku.emit({
  text: 'example',

  // When using DOM engine, `text` can be parsed as HTML if `html` is `true`.
  // You should never pass in users' inputs directly to avoid XSS.
  // `false` by default.
  // DEPRECATED, use `render` instead.
  html: false,

  // 'rtl'(right to left) by default, available mode: 'ltr', 'rtl', 'top', 'bottom'.
  mode: 'rtl',

  // Specified in seconds, if not provided when using with media(video or audio),
  // it will be set to `media.currentTime`. Not required in live mode.
  time: 233.3,

  // When using DOM engine, Danmaku will create a <div> node for each comment,
  // these styles will be set to `node.style` directly, just write with CSS rules.
  style: {
    fontSize: '20px',
    color: '#ffffff',
    border: '1px solid #337ab7',
    textShadow: '-1px -1px #000, -1px 1px #000, 1px -1px #000, 1px 1px #000'
  },

  // When using canvas engine, following properties are available by default
  // as a CanvasRenderingContext2D object.
  canvasStyle: {
    // In Chrome, minimum font-size is 12px
    font: '10px sans-serif',
    textAlign: 'start',
    // Note that 'bottom' is the default
    textBaseline: 'bottom',
    direction: 'inherit',
    fillStyle: '#000',
    // If strokeStyle isn't assigned, there will be no stroke.
    strokeStyle: '#000',
    // It will be effect like strokeWidth.
    lineWidth: 1.0,
    shadowBlur: 0,
    shadowColor: '#000',
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    filter: 'none',
    globalAlpha: 1.0
  },

  // A custom render to draw your comment.
  // when `render` exist, `text`, `html`, `style` and `canvasStyle` will be ignored.

  // When using DOM engine, you should return an HTMLElement.
  render: function() {
    var $div = document.createElement('div');
    var $img = document.createElement('img');
    $img.src = '/path/to/xxx.png';
    $div.appendChild($img);
    return $div;
  },
  // When using canvas engine, you should return an HTMLCanvasElement.
  render: function() {
    var canvas = document.createElement('canvas');
    canvas.width = 320;
    canvas.height = 180;
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, 2 * Math.PI);
    ctx.stroke();
    return canvas;
  }
});

danmaku.resize();

danmaku.show();

danmaku.hide();

danmaku.clear();

danmaku.speed = 144;

danmaku.destroy();