1、简介
1.1、通信方式
单工:数据只支持在一个方向传输,即单向,在同一时间内只有一方能够接受&发送信息;
半双工:允许数据能够双向传输,但是,在某一时刻只允许数据在一个方向传输。类似切换方向的单工通信。http就是半双工通信,先有请求,再有响应;
全双工:允许数据同时都能双向传输,类似两个单工通信的结合,要求client & server都有独立接收和发送的能力,在任意时刻都能接收&发送信息,socket就是全双工通信;
1.2、websocket
websocket本质是一种网络应用层协议,建立在单个TCP连接上的全双工模式,用来弥补了http协议在持续双向通信能力上的不足,允许服务端与客户端之间可以双向主动推送数据。
特点:
与http协议有着良好的兼容性,默认端口80(协议标识为ws)或者443(加密传输,协议标识为wss);
建立连接的握手阶段采用的是http协议,根据这个特性,可以在链路中间引入http代理服务器;
数据格式轻量,性能开销小,通信效率高(只要建立连接后,就可以无限收发报文);
报文内容可以是文本,也可以是二进制数据;
没有同源的约束,不存在跨域一说,客户端可以与任意服务器通信(前提是服务器能应答);
对外暴露的URL为:ws://${domain}:80/${path},或者wss://${domain}:443/${path}
2、搭建demo
2.1、server
采用ws库快速构建一个websocket server,监听connection事件,收到消息并且打印后,立马发送给客户端
const ws = require('ws');
let wsServer = new ws.Server({
port: 3000,
host:'127.0.0.1',
path:'/websocket'
});
wsServer.on('connection', function (server) {
console.log('client connected');
server.on('message', function (message) {
console.dir(message)
console.log(message.toString());
server.send(`hello:${message}`)
});
});
复制代码
2.2、client
快速搭建一个websocket client,利用http-server在目录下启动,并且访问该页面
<!DOCTYPE html>
<html>
<head>
<title>websocket demo</title>
</head>
<body>
<h1></h1>
<br>
<input type='text' id='sendText'>
<button onclick='send()'>send</button>
</body>