1.客户端
websocket是一种网络协议，允许客户端和服务器端全双工进行通信。
1.1 创建websocket对象
<!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>聊天室</title>
<style>
html,
body,
p {
margin: 0px;
padding: 0px;
}
div {
margin-top: 5px;
}
</style>
</head>
<body>
<input type="text" /> <button>发送</button>
<div></div>
</body>
<script>
let socket = new WebSocket("ws://localhost:3000");
let input = document.querySelector("input")
let button = document.querySelector("button")
let div = document.querySelector("div")
const TYPE_ENTER = 0;
const TYPE_LEAVE = 1;
const TYPE_MSG = 2;
//连接服务器端数据
socket.addEventListener("open", function () {
console.log("连接成功")
})
//接受服务器端返回的数据
socket.addEventListener("message", function (e) {
// console.log(e.data);
let { data } = e;
// div.innerHTML = e.data
let el = document.createElement("p")
el.innerText = data
data = JSON.parse(data)
if (data.type == TYPE_ENTER) {
el.style.color = "green"
} else if (data.type == TYPE_LEAVE) {
el.style.color = "red"
} else {
el.style.color = "orange"
}
div.appendChild(el)
})
//关闭连接
socket.addEventListener("close", function (e) {
console.log("连接关闭")
})
//捕获错误
socket.addEventListener("error", function (e) {
console.log("你好", e)
})
//点击按钮
button.addEventListener("click", function () {
let value = input.value;
socket.send(value)
input.value = ''
})
</script>
</html>
1.2 websocket事件
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| open | socket.onopen | 链接建立时触发 |
| message | socket.onmessage | 客户端接收服务端数据时触发 |
| error | socket.onerror | 通信发生错误的时候触发 |
| close | socket.onclose | 连接关闭时触发 |
1.3 websocket方法
| 方法 | 描述 |
|---|---|
| socket.send() | 使用连接发送数据 |
| socket.close() | 关闭连接 |
2. 服务器端
2.1 安装：ws依赖
const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 3000 });
wss.on("connection", function connection(ws) {
//接收客户端的消息，并把消息返回客户端
ws.on("message", function (data) {
ws.send(data);
});
});
3000端口被占用
netstat -ano|findstr 3000
taskkill /f /t /im 13092
2.2 安装nodejs-websocket依赖
先初始化 npm init -y
npm i nodejs-websocket 下载依赖包
const ws = require("nodejs-websocket");
const TYPE_ENTER = 0;
const TYPE_LEAVE = 1;
const TYPE_MSG = 2;
var count = 0;
const server = ws.createServer((conn) => {
count++;
console.log(`新的连接:用户${count}`);
conn.userName = `用户${count}`;
broadcast({
type: TYPE_ENTER,
msg: `${conn.userName}进入了聊天室`,
time: new Date().toLocaleTimeString(),
});
//接收信息
conn.on("text", (data) => {
broadcast({
type: TYPE_MSG,
msg: data,
time: new Date().toLocaleTimeString(),
});
});
//关闭连接
conn.on("close", (data) => {
console.log(`关闭连接:${conn.userName}`);
broadcast({
type: TYPE_LEAVE,
msg: `关闭连接${conn.userName}`,
time: new Date().toLocaleTimeString(),
});
count--;
});
conn.on("text", (data) => {});
});
server.listen(3000, function () {
console.log("--3000---");
});
//广播消息
function broadcast(msg) {
server.connections.forEach(function (conn) {
conn.sendText(JSON.stringify(msg));
});
}
3.Blob类型
binary large object 二进制大对象
MIME类型
| MIME类型 | 描述 |
|---|---|
| text/plain | 纯文本文件 |
| text/html | html文件 |
| text/javascript | javascript文件 |
| application/json | json文件 |
| application/pdf | pdf文件 |
| application/xml | xml文件 |
| image/jpeg | jpeg图像 |
| image/png | png图像 |
| image/gif | gif图像 |
| image/svg+xml | svg图像 |
| audio/mpeg | mp3文件 |
| video/mpeg | mp4文件 |
图片转化成dataUrl
<body>
<input type="file" id="fileId" />
</body>
<script>
let input = document.querySelector("input")
input.onchange = function (e) {
let file = e.target.files[0] //file继承自Blob数据类型
console.log(file)
let reader = new FileReader(); //Blob转成dataUrl
reader.readAsDataURL(file)
reader.onloadend=function(e){
console.log(e.target.result)
}
}
</script>
Blob转化成Text
//创建Blob数据类型
let blob = new Blob(["helloworld"], { type: "text/plain" })
// let blob1 = blob.slice(0, 5, 'text/plain')
let reader = new FileReader()
reader.readAsText(blob)
// console.log(fileReader.result)
console.log(reader)
