websocket 是在http1.0,http1.1基础上运行的协议,客户端与服务端先建立http连接,客户端发送upgrade请求,双方再建立号socket双工通信
socket.io会判断客户端是否支持websocket,如果不支持降级为http沦陷
socket.io可以自定义事件发送到对端,对端可以是服务器,可以是客户端;使用emit发送,接收还是on
服务端
const http = require("http");
const io = require("socket.io");
const fs = require("fs");
const server = http.createServer((request, response) => {
response.writeHead(200, { "Content-Type": "text/html" });
if (request.url == "/") {
fs.readFile("./index.html", (error, data) => {
if (error) return console.log(error);
response.end(data.toString("utf8"));
});
} else {
response.end("<html>error</html>");
}
});
server.listen(3000);
const socket = io(server);
socket.on("connection", (connect) => {
connect.on("message", (message) => {
console.log("message", message);
});
connect.on("disconnect", () => {
console.log("connection has lost");
});
connect.send("hello client");
// 自定义发送 事件
connect.emit("server_event", "this is server event");
connect.on("client_event", (message) => {
console.log(message);
});
// 广播 broadcast
connect.on("broadcast_client_event", (message) => {
console.log(message);
// 广播给所有客户端
connect.broadcast.emit("broadcast_server_event", "你好 服务器广播");
});
});
客户端
<!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" />
<!-- 推荐的写法:socket.io 内置的路径,如果服务器是nodejs用的socket.io建立http,则自动映射到socket.io的js文件 -->
<script src="/socket.io/socket.io.js"></script>
<title>Document</title>
</head>
<body>
<div>客户端</div>
<script>
const socket = io("http://localhost:3000");
socket.on("message", (message) => {
console.log(message);
socket.send("hello server");
});
socket.on("disconnect", () => {
console.log("disconnect");
});
// 自定义接收事件
socket.on("server_event", (message) => {
console.log("server_event", message);
});
socket.emit("client_event", "client envent");
// 广播
socket.emit("broadcast_client_event", "广播到所有客户端");
socket.on("broadcast_server_event", (message) => {
console.log("server_event", message);
});
</script>
</body>
</html>
自定义事件
双方采用 emit 和 on
socket.on("server_event", (message) => {
console.log("server_event", message);
});
// 自定义发送 事件
connect.emit("server_event", "this is server event");
广播
服务端不用再去维护所有connect列表,直接调用 connect.broadcast.emit 触发广播事件,只会广播给其他客户端,不会广播给自己客户端
// 广播 broadcast
connect.on("broadcast_client_event", (message) => {
console.log(message);
// 广播给所有客户端
connect.broadcast.emit("broadcast_server_event", "你好 服务器广播");
});