preface

Barrage, or barrage, is a popular Chinese term for the barrage of critical subtitles that pop up while watching videos online. Similar to the lines in novels, the comments that float across the screen in the video are called “bullet screens,” which means to provide a barrage of artillery with a large or small amount of artillery. And a barrage, as the name suggests, is a curtain of bullets, and when a lot of jokes float across the screen it looks like a barrage from a flying shooter.

A long time ago, bullet subtitles only appeared in videos and made jokes while watching videos, which became the habit of many people.

Later, more and more places appeared. Bar, enterprise annual meeting, industry summit, campus party and other scenes, where there is a big screen, basically bullet screen can be used. I have to say, in many situations, the barrage is a miracle.

So, as a front end, how to hand off a barrage tool?

Demand analysis

First, let’s analyze the requirements:

  • In order to improve the user’s participation, the user’s cost should be reduced as far as possible. There is no need to download the APP, no need to register an account, and the scan code is ready to use.
  • It is possible that a video or a powerpoint presentation is being played when a bullet screen is used. So our barrage should be a transparent overlay that can be superimposed on any background element, and the mouse can also operate the controls below the barrage.
  • Video or powerpoint computers, the most common, are probably Windows or Mac, so we have to adapt to multiple platforms.

The above, should be the most basic requirements of this ammunition tool.

Technology selection

As can be seen from the above requirements, we probably need three ends of development:

  • Sending end: scan code to use, running on the user’s mobile phone, small programs become a good choice.
  • Receiving end: Running on a PC, the currently popular Electron can use front-end technology to build cross-platform desktop applications.
  • Server: Between the sender and receiver, there should be a server for data processing. That’s where NodeJS comes in.

Obviously, a single front end can do all of this.

Overall architecture diagram

Simple Websocket server construction

We can quickly build a Websocket service through THE WS module.

const WebSocket = require('ws');
 
const wss = new WebSocket.Server({ port: 8080 });
 
wss.on('connection'.function connection(ws) {
  ws.on('message'.function incoming(message) {
    console.log('received: %s', message);
  });
 
  ws.send('something');
});
Copy the code

The above is just the simplest websocket service example, you can go to the WS module documentation in detail. There will be a blog post on the server side.

other

Wechat requires all of our APIS and domain names to be registered, and the protocol must be HTTPS or WSS. If our products want to go online eventually, we need to apply for domain name, domain name registration and SSL certificate.

FreeSSL.org is a free HTTPS certificate application site that you may need.

Once you have the domain name and certificate, you need to configure nGINx to support the WSS protocol. For example, if our service is running on port 8080 and our access domain name is WS ://danmu.xxx.com, then the nginx configuration should look like this:

server {
    listen 443;
    server_name danmu.xxx.com;

    ssl on;
    # Location where the SSL certificate file is stored
    ssl_certificate   /ssl_cert/danmu.xxx.com.pem;
    ssl_certificate_key  /ssl_cert/danmu.xxx.com.key;
    
    ssl_session_timeout 5m;
    ssl_ciphersECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:! NULL:! aNULL:! MD5:! ADH:! RC4;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    location / {
        proxy_pass http://localhost:8080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade"; }}Copy the code

Details can be found in the official documentation

conclusion

This paper summarizes the product form of the bullet screen we want to make, carries out preliminary technical selection, and foretells some preparatory work needed to go online.

Next, there will be a special article to explain the development of each end in detail. If you are interested, you can follow us and we will continue to update.

Above, if there are mistakes, welcome to correct!

@Author: TDGarden