目录
1. WebSocket
1.1. 是什么?
1.2. 一个例子
1.3. 连接建立过程
2. ws
2.1. 基础
2.2. 简易 Server
2.3. 复用 HTTP 连接
3. webpack-dev-server 对 WebSocket 的应用
3.1. 总体结构
3.2. WebSocket 后端
3.3. WebSocket 前端
1. WebSocket
1.1. 是什么?
WebSocket 是一种通信协议,可在单个 TCP 连接上进行全双工通信。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就可以建立持久性的连接,并进行双向数据传输。
1.2. 一个例子
效果展示:
后端代码:
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(`echo: ${message}!`);
});
ws.send('connected!');
});
前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.websocket {
width: 800px;
border: 1px solid #ccc;
margin: 16px auto 0 auto;
display: flex;
flex-direction: row;
}
.websocket p {
text-align: center;
}
.websocket > .send {
flex: 1;
padding: 16px;
border-right: 1px solid #ccc;
}
.websocket > .send > .msg-send{
width: 100%;
height: 200px;
border-radius: 5px;
}
.websocket > .send .btn-send {
border: none;
border-radius: 5px;
background: #25d1ff;
padding: 5px 10px;
color: #fff;
cursor: pointer;
}
.websocket > .send .btn-close {
border: 1px solid #ccc;
border-radius: 5px;
background: none;
padding: 5px 10px;
cursor: pointer;
}
.websocket > .receive {
flex: 1;
padding: 16px;
}
.websocket > .receive > .msg-receive {
height: 200px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: auto;
}
.websocket > .receive > .msg-receive > .msg-item{
font-size: 14px;
}
</style>
</head>
<body>
<div class="websocket">
<div class="send">
<p>数据发送</p>
<textarea type="text" class="msg-send"></textarea>
<p>
<button class="btn-send">发送消息</button>
<button class="btn-close">关闭连接</button>
</p>
</div>
<div class="receive">
<p>数据接收</p>
<div class="msg-receive"></div>
</div>
</div>
<script type="text/javascript">
const ws = new WebSocket('ws://127.0.0.1:8080');
ws.onopen = e => {
console.log(`WebSocket 连接状态:${ws.readyState}`)
};
ws.onmessage = data => {
const msgReceive = document.querySelector('.websocket > .receive > .msg-receive');
msgReceive.innerHTML += `<div class="msg-item">${data.data}</div>`;
};
ws.onclose = data => {
console.log('WebSocket连接已关闭')
console.log(data);
};
// 发送消息
const btnSend = document.querySelector('.websocket > .send .btn-send');
const msgSend = document.querySelector('.websocket > .send > .msg-send');
btnSend.onclick = () => ws.send(msgSend.value);
// 关闭链接
const btnClose = document.querySelector('.websocket > .send .btn-close');
btnClose.onclick = () => ws.close();
</script>
</body>
</html>
1.3. 连接建立过程
请求字段重点包括:
响应字段重点包括:
2. ws
2.1. 基础
2.2. 简易 Server
const WebSocket = require('ws');
const ws = new WebSocket('ws://www.host.com/path');
ws.on('open', function open() {
const array = new Float32Array(5);
for (var i = 0; i < array.length; ++i) {
array[i] = i / 2;
}
ws.send(array);
});
2.3. 复用 HTTP 连接
const http = require('http');
const WebSocket = require('ws');
const url = require('url');
const server = http.createServer();
const wss1 = new WebSocket.Server({ noServer: true });
const wss2 = new WebSocket.Server({ noServer: true });
wss1.on('connection', function connection(ws) {
// ...
});
wss2.on('connection', function connection(ws) {
// ...
});
server.on('upgrade', function upgrade(request, socket, head) {
const pathname = url.parse(request.url).pathname;
if (pathname === '/foo') {
wss1.handleUpgrade(request, socket, head, function done(ws) {
wss1.emit('connection', ws, request);
});
} else if (pathname === '/bar') {
wss2.handleUpgrade(request, socket, head, function done(ws) {
wss2.emit('connection', ws, request);
});
} else {
socket.destroy();
}
});
server.listen(8080);
3. webpack-dev-server 对 WebSocket 的应用
3.1. 总体结构
3.2. WebSocket 后端
webpack-dev-server 的 CLI 入口:
webpack-dev-server 如何选择 WebSocket 的 Server 端实现:
webpack-dev-server 如何确定 WebSocket 的服务地址:
3.3. WebSocket 前端
webpack-dev-server 的 WebSocket 前端实现何时选定?:
webpack-dev-server 的 WebSocket 前端实现何时选定?:
webpack-dev-server 的 WebSocket 前端如何加载?:
参考:
ws: https://github.com/websockets/ws webpack-dev-server: https://www.webpackjs.com/configuration/dev-server/ webpack-dev-server 配置: https://webpack.js.org/configuration/dev-server/#devserversockpath https://webpack.js.org/configuration/dev-server/#devservertransportmode