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!