On a whim these two days, I saw a super cool RGB dazzling color effect on Codepen, and I want to do something with it. I’m just studying webSocket. I want to write a bullet screen or chat room with it, so it’s better to act, let’s start

First of all, thanks to Gayane’s layout and CSS3 animation on Codepen, if you are interested, please give me a look

Codepen. IO/gayane – — gasp…

So let’s start with a couple of things that we’re going to use

The framework used is [email protected]

Generate qr code is arale of NPM – qrcode third-party packages www.npmjs.com/package/ara…

The webSocket on the back end uses NPM’s WS third-party package www.npmjs.com/package/ws

I will not repeat the relevant API here, you are certainly more powerful than me this sprout new, so start the topic

The first is the layout of the landing page

<template>
  <div class="loginContainer">
    <div class="card" @click="showQrcode">
      <div v-if=! "" hasLogin">
        <div v-if="isShow">Join your own world of bullets</div>
        <div v-else class="qrcode"></div>
      </div>
      <div v-else class="qrcode">Login successful</div>
    </div>
  </div>
</template>
Copy the code

The login page is styled less

<style lang="less">
.loginContainer {
  position: relative;
  padding: 50px;
}

.title {
  display: flex;
  justify-content: center;
  position: absolute;
  color: #fff;
  text-align: center;
  z-index: 999;
}

@property --rotate {
  syntax: '<angle>';
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}

body {
  min-height: 100vh;
  background: # 212534;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}

.card {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5 em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive; }.card:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
  color: #fff; }.card:hover:before,
.card:hover:after {
  animation: none;
  opacity: 0; }.card::before {
  content: ' ';
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate),
    #5ddcff.#3c67e3 43%.#4e00c2
  );
  position: absolute;
  z-index: -1;
  top: -1%;
  left: -2%;
  animation: spin 2.5 slinear infinite; }.card::after {
  position: absolute;
  content: ' ';
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate),
    #5ddcff.#3c67e3 43%.#4e00c2
  );
  opacity: 1;
  transition: opacity 0.5 s;
  animation: spin 2.5 s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100%{ --rotate: 360deg; }}a {
  color: # 212534;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  margin-top: 2rem; } < /style>

Copy the code

Note: Gayane is using native CSS without any preloaders.

Very simple login logic

<script>
// Import the QR code generator
import AraleQrcode from 'arale-qrcode'

export default {
  name: 'BulletScreenQrcodeLogin',

  data () {
    return {
      / / display the title
      isShow: true.// Whether to log in
      hasLogin: false.// webSocket predefined variables
      ws: null}},// Calls the hook to close the link when the component is destroyed
  beforeDestroy () {
    this.ws.close()
    this.ws = null
  },

  methods: {
    // The login QR code is displayed
    async showQrcode () {
      this.isShow = !this.isShow
      // The local service used here
      this.ws = new WebSocket('ws://localhost:8080')
      this.ws.onopen = (res) = > {
        console.log(res.data)
      }
      // Receive a message from webSocket
      this.ws.onmessage = (res) = > {
        if (JSON.parse(res.data).code === 1) {
          // Check whether the login has been scanned
          this.hasLogin = true
          this.isShow = false
          // Close the link
          this.ws.close()
          // Jump to the bullet screen
          this.$router.push('/')}}if (!this.isShow) {
        const getQrcode = () = > {
          return new Promise((resolve, reject) = > {
            // Generate a QR code
            const qrcode = new AraleQrcode({
              // Here is the qr code scanning address, note that if you do not add the domain name scanning will not occur
              text: 'http:/localhost:3000/api/login'.size: 150.correctLevel: 3
            })
            resolve(qrcode)
          })
        }
        const qrResult = await getQrcode()
        // Add the QR code to the page
        document.querySelector('.qrcode').appendChild(qrResult)
      }
    }
  }
}
</script>

Copy the code

Qr code in the practical work, of course, the business logic of the login certainly not so simple, this is just a small Demo, and to do all kinds of logic optimization, just to show or to understand the business for the first time a friend into a gate, if friends like I can login to stage a qr code detailed logic and related encryption way yo

Then there is the bullet screen display page

The first is layout

<template>
  <div class="menu">
    <div class="container">
      <div class="bulletList">
        <div
          class="bulletItem"
          v-for="(item, index) in bulletList"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div class="bullet">
        <input type="text" v-model="bullet" placeholder="Please enter your barrage" />
        <button class="btn" @click="subBullet">send</button>
      </div>
    </div>
  </div>
</template>
Copy the code

The second is style

<style lang="less" scoped>
.menu {
  width: 100%;
  height: 100%;
  background-color: # 212534;
  .container {
    .bullet {
      position: absolute;
      left: 50%;
      top: 620px;
      transform: translate(-57.3%.0);
      width: 700px;
      z-index: 999;

      input {
        width: 100%;
        height: 30px;
        background-color: rgba(0.0.0.0.2);
        outline: none;
        border: none;
        border-radius: 5px;
        padding-left: 20px;
        color: #fff; }}&::after {
      content: ' ';
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translate(-50%.0);
      width: 800px;
      height: 500px;
      background-color: rgba(255.255.255.0.2);
      opacity: 0.2;
      box-shadow: 0 0 10px 3px;
      z-index: 1; }}.btn {
    position: absolute;
    top: 0;
    right: -85px;
    width: 50px;
    height: 30px;
    border: none;
    color: #fff;
    box-shadow: 0 0 5px 3px rgba(255.255.255.0.2);
    background-color: #2a2e3c;
    border-radius: 5px;
    cursor: pointer; }}.bulletList {
  position: absolute;
  top: 110px;
  left: 1370px;
}

.bulletItem {
  // position: absolute;
  // top: 0;
  // left: 0;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid # 212534;
  color: #fff;
  box-shadow: 0 0 5px 3px rgba(255.255.255.0.2);
  animation: toLeft 3s linear forwards;
}
@keyframes toLeft {
  to {
    transform: translate(-1900px); }}Copy the code

Finally, the simple logic of adding and displaying barrage

<script>
export default {
  name: 'BulletScreenQrcodeMenu',

  data () {
    return {
      // Double bind content
      bullet: ' '.// List of bullets
      bulletList: []./ / you know
      ws: null}},// Call the hook to link at load time
  mounted () {
    this.ws = new WebSocket('ws://localhost:6060')
    this.ws.onmessage = (res) = > {
      if (JSON.parse(res.data).code === 3) {
        this.bulletList.push(JSON.parse(res.data).message)
      }
    }
  },
  // Call the hook to break the link when the component is destroyed
  beforeDestroy () {
    this.ws.close()
    this.ws = null
  },

  methods: {
    // Add the logic related to the barrage
    async subBullet () {
      // Initiate a request to the background
      const res = await this.axios.post('http://localhost:3000/api/addBullet', {
        bull: this.bullet
      })
      console.log(res)
    }
  }
}
</script>
Copy the code

The logic here is quite simple, and it is just a demonstration, and let the kids know that learning is not that difficult

The final product looks like this

The login

Barrage display interface

The back-end

The back end is a third-party package using the Express framework + WS

//1. Import modules
const express = require('express');
2. Create a server
let app = express();
// cors 
const cors = require('cors')

const webSoket = require('ws');
const { request } = require('express');

const wss1 = new webSoket.Server({ port:8080 })
const wss2 = new webSoket.Server({ port:6060 })

app.use(express.json());// Allow the request header to carry jSON-formatted parameters
app.use(express.urlencoded({ extended: false }));// Allow request headers to carry application/x-www-form-urlencoded category parameters
app.use(cors())

let login = ' ';
let addBullet = ' ';

wss1.on('connection'.(ws) = >{
    login = ws
    ws.on('open'.(res) = >{
        console.log('Client initiates link');
        ws.send(`{"code":2,"message":"success"}`)
    }) 
    ws.on('message'.(res) = >{
        ws.send(`{"code":4,"message":"has open"}`)
    })
    
    ws.onclose = () = >{
    }
})  

app.get('/api/login'.(request, response) = > {          
    response.send('Code scan successful')
    console.log('Someone scanned the code.');
    login.send('{"code":1,"message":" scanned successfully "}')
    console.log('I sent it.');
});

app.post('/api/addBullet'.(request,response) = >{
    console.log(request.body);
    addBullet.send(`{"code":3,"message":"${request.body.bull}"} `)
    console.log('I sent it.');

})
app.get('/api/addBullet'.(request,response) = >{
    addBullet.send(`{"code":3,"message":"${request.body.bull}"} `)
    console.log(request.body);
    console.log('I sent it.');

})
wss2.on('connection'.(ws) = >{
    addBullet = ws
})


app.listen(3000.() = >{
    console.log('success');
});
Copy the code

As a demo, it should be ok

Write the last words

Many people who are looking for a job are worried and afraid that they will not be able to answer the difficult questions and that they will not be able to find a satisfactory job. In fact, it is not so. The interview is more like a process of showing yourself, showing your best side to the interviewer, looking at your shortcomings, re-examining yourself, checking your shortcomings and trying to improve yourself.

So I hope you relax in the interview, in the best state to show themselves, but also wish you can find a satisfactory job in the golden three silver four time, if this article to help you, please also like it!