一篇让你秒懂Websocket文章
一、WebSocket原理
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
二、WebSocket和http的区别
右键检查打开点击network（网络）
三、利用websocket实现一个客户端向另一个客户端发送消息
客户端2输入值，客户端1可以接受到客户端1输入值
效果图 🧠
1、npm下载websocket
npm install websocket
2、在根目录创建index.js和index.html
3、上代码 🥬
html部分
<!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>
</head>
<body>
<div>
<input type="text" id="text">
<input type="button" value="发送" onclick="send()">
</div>
<script>
//WebSocket协议名字是ws，不是http
//创建客户端链接
var websocket = new WebSocket('ws://127.0.0.1:8080')
//监听websocket链接
websocket.onopen = function () {
console.log(websocket.readyState);
}
//发送的点击事件
function send() {
//获取元素内容
var text = document.getElementById('text').value
//发送给服务端
websocket.send(text)
}
//客户端接受服务器传过来值
websocket.onmessage = function (back) {
console.log(back);
}
</script>
</body>
</html>
客户端接受服务器传过来值——效果图
js部分
//创建Websocket服务器
var Websocket = require('websocket').server
//因Websocket是基于http，所需创建http服务器
var http = require('http')
//建立端口
var httpSever = http.createServer().listen(8080, function () {
console.log('http://127.0.0.1:8080');
})
//创建Websocket实例化
var wsSever = new Websocket({
httpServer: httpSever,
//Websocket建立之后没有跨域，建立之前是有跨域
autoAcceptConnections: false
})
//创建数组保存每次的connection值
var conArr = []
//利用on监听事件
wsSever.on('request', function (request) {
var connection = request.accept()
//将connection追加到数组中
conArr.push(connection)
//接受客户端的值
connection.on('message', function (msg) {
console.log(msg);
for (let i = 0; i < conArr.length; i++) {
//发送给客户端
conArr[i].send(msg)
}
})
})
服务器接受客户端传过来值——效果图
