当前位置：网站首页>Websocket (basic)
Websocket (basic)
2022-04-23 17:14:00 【MiMenge】
What is? WebSocket？
WebSocket Is based on TCP/IP agreement , Independent of HTTP Protocol communication protocol .
WebSocket It's two-way communication , A stateful , Client 1 （ many ） One with the server （ many ） Bidirectional real-time response （ client ⇄ Server side ）.
WebSocket It is applied in the browser Socket （ yes Socket Implementation of model interface ）,Socket Is a network communication interface （ Communication specifications ）.
WebSocket The protocol port is 80.
WebSocket SSL The protocol port is 443.
Socket yes TCP/IP Network data communication interface of protocol （ An underlying means of communication ）.
Socket yes IP Combination of address and port number . for example ：192.168.1.100:8080.
WebSocket The role of
Full duplex with the server is realized through a long-term connection 、 Full two-way communication .
Popular said Is to establish a connection between the server and the client , A certain connection is established between them . The server can send requests to the client , However The server can also send requests to the client . Before breaking http In the connected state, the client can only send requests to the server .
Create a WebSocket when , One Http Service to initialize the connection . After the server responds , Link using http Head from http The protocol switches to websocket agreement (Upgrade).
because WebSocket Using custom protocol , therefore Url The plan will change , No more use http://, https://
Need to use ws://, wss://. The former is an insecure connection , The latter is a secure connection .
Advantages of using custom protocols
The client and server can send very little data , It won't be right http Cause any burden . It can be used in applications with great impact on bandwidth and delay ( The packet size is small ). Not affected by homologous strategies
shortcoming
Longer definition time
Use WebSocket
establish
let ws = new WebSocket('ws://www.awdz.com/server.php');
adopt new establish websocket, What's coming in url It's the absolute path . Because it is not affected by the homology strategy . So you can open the connection of any site .
When the initialization websocket after , The browser will immediately create a connection .
websocket There is also a readyState
| value | state |
|---|---|
| WebSocket.opening(0) | Connection is being established |
| WebSocket.open(1) | Connection established |
| WebSocket.closeing(2) | The connection is closing |
| WebSocket.close(3) | Connection closed |
apis
| api | describe |
|---|---|
| send | Send to socket Service data |
event
| event | describe |
|---|---|
| onopen | Trigger when the connection is successful |
| onerror | Trigger... When connection error occurs |
| onclose | Trigger... When the connection is closed |
| onmessage | Triggered when the service response data is received |
close WebSocket Methods
.close() Method
let ws = new WebSocket('wss://123.123.1.3:22/ww.txt');
// Close the connection
ws.close();
Send request to server , Receive request from server
Build on the server websocket service ( A very humble chat room )
You need to use npm A download process websocket Third party modules for services
$ npm install nodejs-websocket -s
After downloading, introduce the module
const socketConn = require('nodejs-websocket');
establish socket service
const socketConnet = socket.createServer(conn => {
});
Listening port
socketConnet.listen(4400, err => {
if (err) {
throw new Error('socket Boot failure ');
}
console.log('socket Successful launch ');
});
monitor socket state
// Create a broadcast
socketConnet.connections.forEach(item => {
item.sendText(' Number of people online in chat rooms ' + socketConnet.connections.length)
});
// monitor socket The connection of is closed
conn.on('close', () => {
console.log(' Connection is closed ');
console.log(socketConnet.connections.length);
socketConnet.connections.forEach(item => {
item.sendText(' Number of people online in chat rooms ' + socketConnet.connections.length)
});
});
// Receive requests from clients
conn.on('text', (data) => {
conn.sendText(' Play a role ' + JSON.parse(data));
})
// Listen for the disconnection abnormal state of the connection
conn.on('error', () => {
// console.log('err');
})
Complete code
const socket = require('nodejs-websocket');
const socketConnet = socket.createServer(conn => {
// Create a broadcast
socketConnet.connections.forEach(item => {
item.sendText(JSON.stringify({
key: 001, value: ' Number of people online in chat rooms ' + socketConnet.connections.length
}))
});
// monitor socket The connection of is closed
conn.on('close', () => {
socketConnet.connections.forEach(item => {
item.sendText(JSON.stringify({
key: 001, value: ' Number of people online in chat rooms ' + socketConnet.connections.length
}))
});
});
// Receive requests from clients
conn.on('text', (data) => {
let userData = {
key: conn.key,
value: data
}
// Broadcast distribution
socketConnet.connections.forEach(item => {
item.sendText(JSON.stringify(userData));
});
})
// Listen for the disconnection abnormal state of the connection
conn.on('error', () => {
})
});
// Listening port
socketConnet.listen(3300, err => {
if (err) {
throw new Error('socket Boot failure ');
}
console.log('socket Successful launch ');
});
Use on client webSocket
establish websocket service
let socket = new WebSocket('ws://localhost:4400');
event
// establish websocket
let socket = new WebSocket('ws://192.168.2.97:3300');
let chatRoom = document.querySelector('.chatRoom');
let input = document.querySelector('input');
let ul = document.querySelector('ul');
// socket Triggered on successful connection
socket.onopen = function () {
console.log(' Successful connection ');
}
// socket Triggered when the connection is closed
socket.onclose = function () {
console.log(' Connection is broken ');
}
// socket Triggered when the connection fails
socket.onerror = function (err) {
console.log(' The connection fails ' + err);
// Close connection on failure
socket.close();
}
// receive socket The server's response or request
socket.onmessage = function (message) {
// console.log(message);
if (message && JSON.parse(message.data).key) {
if (JSON.parse(message.data).key === 1) {
chatRoom.innerText = JSON.parse(message.data).value;
} else {
let li = document.createElement('li');
li.innerHTML = ` <div class="name">${
JSON.parse(message.data).key}</div> <p>${
JSON.parse(message.data).value}</p> `;
ul.appendChild(li);
}
} else {
}
}
let buttons = document.querySelectorAll('button');
buttons[0].onclick = function () {
if (input.value.trim()) {
socket.send(input.value);
input.value = ''
} else {
confirm(' Input cannot be empty ！');
}
}
buttons[1].onclick = function () {
socket.close();
confirm(' Disconnected ');
}
close Method can be closed socket Connect
All the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.phone {
width: 300px;
height: 600px;
padding: 20px;
margin: 0 auto;
border-radius: 10px;
border: 1px solid #ff0;
}
div.show {
position: relative;
width: 300px;
height: 560px;
border-radius: 10px;
border: 1px solid #111;
}
p.chatRoom {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 10px;
background-color: rgba(255, 255, 0, 0.473);
}
.kuang {
width: 100%;
overflow-y: auto;
height: calc(100% - 80px);
}
ul {
width: 100%;
}
li {
width: 100%;
min-height: 60px;
margin-bottom: 10px;
background-color: rgb(247, 245, 245);
}
.name {
width: 100%;
height: 20px;
color: red;
}
li>p {
width: calc(100%-20px);
padding: 0 10px;
min-height: 40px;
border: 1px solid #ccc;
word-wrap: break-word;
}
input {
position: absolute;
bottom: 0;
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<div class="phone">
<div class="show">
<p class="chatRoom">
</p>
<div class="kuang">
<ul>
</ul>
</div>
<input type="text">
</div>
<button> Send a message </button>
<button> close websocket</button>
</div>
<script>
// establish websocket
let socket = new WebSocket('ws://192.168.2.97:3300');
let chatRoom = document.querySelector('.chatRoom');
let input = document.querySelector('input');
let ul = document.querySelector('ul');
// socket Triggered on successful connection
socket.onopen = function () {
console.log(' Successful connection ');
}
// socket Triggered when the connection is closed
socket.onclose = function () {
console.log(' Connection is broken ');
}
// socket Triggered when the connection fails
socket.onerror = function (err) {
console.log(' The connection fails ' + err);
// Close connection on failure
socket.close();
}
// receive socket The server's response or request
socket.onmessage = function (message) {
// console.log(message);
if (message && JSON.parse(message.data).key) {
if (JSON.parse(message.data).key === 1) {
chatRoom.innerText = JSON.parse(message.data).value;
} else {
let li = document.createElement('li');
li.innerHTML = ` <div class="name">${
JSON.parse(message.data).key}</div> <p>${
JSON.parse(message.data).value}</p> `;
ul.appendChild(li);
}
} else {
}
}
let buttons = document.querySelectorAll('button');
buttons[0].onclick = function () {
if (input.value.trim()) {
socket.send(input.value);
input.value = ''
} else {
confirm(' Input cannot be empty ！');
}
}
buttons[1].onclick = function () {
socket.close();
confirm(' Disconnected ');
}
</script>
</body>
</html>
Mount static pages
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
fs.readFile(path.join(__dirname + '/public/index.html'), (err, data) => {
if (err) {
response.end('<h1>404~</h1>');
return;
}
response.end(data);
});
});
app.listen(4400, err => {
if (err) {
console.log(err);
return;
}
console.log(' Service started successfully ');
});
版权声明
本文为[MiMenge]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230553027710.html
边栏推荐
- matlab如何绘制已知公式的曲线图,Excel怎么绘制函数曲线图像?
- Summary of common websites
- Some problems encountered in recent programming 2021 / 9 / 8
- Baidu Map Case - Zoom component, map scale component
- Baidu Map 3D rotation and tilt angle adjustment
- Further optimize Baidu map data visualization
- C语言函数详解
- SQL: How to parse Microsoft Transact-SQL Statements in C＃ and to match the column aliases of a view
- Interface document yaml
- SPC introduction
猜你喜欢
. net cross platform principle (Part I)
groutine
Devexpress GridView add select all columns
![[PROJECT] small hat takeout (8)](/img/54/0187eeb637f4dcd4ad3969b00e2b77.png)
[PROJECT] small hat takeout (8)
Shell script -- shell programming specification and variables
For the space occupation of the software, please refer to the installation directory
Sub database and sub table & shardingsphere
Nacos + aspnetcore + Ocelot actual combat code
![Using quartz under. Net core -- general properties and priority of triggers for [5] jobs and triggers](/img/65/89473397da4217201eeee85aef3c10.png)
Using quartz under. Net core -- general properties and priority of triggers for [5] jobs and triggers
XTask与Kotlin Coroutine的使用对比
随机推荐
Using quartz under. Net core -- operation transfer parameters of [3] operation and trigger
基于51单片机红外无线通讯仿真
Lock锁
PostgreSQL column storage and row storage
MySQL modify master database
ASP. Net core configuration options (Part 2)
Come out after a thousand calls
Variable length parameter__ VA_ ARGS__ Macro definitions for and logging
Grpc gateway based on Ocelot
Aiot industrial technology panoramic structure - Digital Architecture Design (8)
线性代数感悟之1
groutine
Using quartz under. Net core - calendar of [6] jobs and triggers
Clickhouse table engine
Some problems encountered in recent programming 2021 / 9 / 8
VLAN advanced technology, VLAN aggregation, super VLAN, sub VLAN
[C] thoroughly understand the deep copy
. net type transfer
ClickHouse-数据类型
.Net Core3. 1 use razorengine NETCORE production entity generator (MVC web version)