Node WebSocket

xiangxiongfly915

已于 2025-02-24 16:01:34 修改

阅读量554

点赞数

CC 4.0 BY-SA版权

分类专栏： # Node 文章标签： Node WebSocket

于 2018-11-04 00:08:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_14876133/article/details/83692682

Node 专栏收录该内容

17 篇文章

订阅专栏

本文深入解析Django框架中的模板系统，包括配置方法、常用语法、过滤器与自定义过滤器的使用，以及如何进行for循环、加载静态文件等操作。通过实例演示，帮助读者掌握Django模板的高级应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

Node WebSocket

Node WebSocket

概述

Node.js中主要通过socket.io模块进行WebSocket网络编程，该模块提供了服务器端和客户端相关的组件，可以很方便地为应用加入WebSocket支持，并且支持不同的浏览器。

通信类型

socket通信类型分3种：

public：向所有客户端发送数据，包含自己。
broadcast：向所有客户端发送数据，不包含自己。
private：向指定客户端发送数据。

事件

服务端事件：

connection：客户端成功连接到服务器。
disconnect：客户端断开连接。
message：捕获客户端发送的消息。
error：发生错误。

客户端事件：

connect：成功连接到服务器。
connecting：正在连接。
disconnect：断开连接。
connect_failed：连接失败。
error：连接错误。
message：捕获服务端发送的消息。
reconnect_failed：重连失败。
reconnect：重连成功。

监听事件：

on()：监听socket事件。

发送事件：

emit()：发送socket事件。

用法

添加依赖包

npm install socket.io

简单实现

定义服务端：

const fs = require("fs");
const http = require("http");
const io = require("socket.io");

const server = http.createServer(async (req, res) => {
    if (req.url === "/") {
        fs.readFile("index.html", (err, data) => {
            res.end(data);
        });
    }
});

server.listen(3000, function (socket) {
    console.log("监听地址：http://localhost:3000,");
});

// 创建Socket服务器
const socketServer = io(server);
// 连接监听
socketServer.sockets.on("connection", (socket) => {
    console.log("客户端已连接");
    // 监听客户端的clientData事件
    socket.on("clientData", (data) => {
        console.log("接收客户端数据：", data);
        // 服务端发送数据
        socket.emit("serverData", data + "123");
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
<fieldset>
    <legend>发送消息</legend>
    <label for="text">发送内容：</label>
    <input type="text" id="text"/>
    <button id="btn">发送</button>
</fieldset>

<script type="text/javascript">
    const socket = io.connect();
    const btn = document.getElementById("btn");
    const text = document.getElementById("text");
    btn.onclick = () => {
        const data = text.value;
        // 客户端发送数据
        socket.emit("clientData", data);
        text.value = "";
    };

    // 监听服务器的数据
    socket.on("serverData", (data) => {
        console.log("接收服务端的数据：", data);
    });
</script>
</body>
</html>

在浏览器输入：http://localhost:3000，可以向服务端发送消息，服务端受到消息后会立即向客户端(浏览器)发送消息。

public通信

io.emit()：发送给所有客户端。

const fs = require("fs");
const http = require("http");
const socketio = require("socket.io");

const server = http.createServer(async (req, res) => {
    if (req.url === "/") {
        fs.readFile("index.html", (err, data) => {
            res.writeHead(200, {"Content-Type": "text/html"});
            res.end(data);
        });
    }
});

server.listen(3000, function (socket) {
    console.log("监听地址：http://localhost:3000,");
});

// 创建Socket服务器
const io = socketio(server);
// 连接监听
io.sockets.on("connection", (socket) => {
    console.log("客户端已连接");
    // 监听客户端数据
    socket.on("clientData", (data) => {
        console.log("服务端接收数据：", data);
        // 发送给所有客户端
        io.emit("serverData", data + "123");
    });
});

broadcast通信

socket.broadcast.emit()：发送给非当前的所有客户端。

const fs = require("fs");
const http = require("http");
const socketio = require("socket.io");

const server = http.createServer(async (req, res) => {
    if (req.url === "/") {
        fs.readFile("index.html", (err, data) => {
            res.writeHead(200, {"Content-Type": "text/html"});
            res.end(data);
        });
    }
});

server.listen(3000, function (socket) {
    console.log("监听地址：http://localhost:3000,");
});

// 创建Socket服务器
const io = socketio(server);
// 连接监听
io.sockets.on("connection", (socket) => {
    console.log("客户端已连接");
    // 监听客户端数据
    socket.on("clientData", (data) => {
        console.log("服务端接收数据：", data);
        // 发送给其他的所有客户端
        socket.broadcast.emit("serverData", data + "123");
    });
});

private通信

定义服务端：

const fs = require("fs");
const http = require("http");
const socketio = require("socket.io");

const server = http.createServer(async (req, res) => {
    if (req.url === "/") {
        fs.readFile("index.html", (err, data) => {
            res.writeHead(200, {"Content-Type": "text/html"});
            res.end(data);
        });
    }
});

server.listen(3000, function (socket) {
    console.log("监听地址：http://localhost:3000,");
});

const idList = [];
// 创建Socket服务器
const io = socketio(server);
// 连接监听
io.sockets.on("connection", (socket) => {
    idList.push(socket.id);
    console.log("客户端已连接");
    // 监听私发消息
    socket.on("oneClient", (data) => {
        console.log("服务端接收one数据：", data);
        // 发送给其他的所有客户端
        io.to(idList[0]).emit("oneServer", data + "456");
    });
    socket.on("allClient", (data) => {
        console.log("服务端接收all数据：", data);
        // 发送给其他的所有客户端
        io.sockets.emit("allServer", data + "123");
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
<fieldset>
    <legend>发送消息</legend>
    <label for="text">发送内容：</label>
    <input type="text" id="text"/>
    <button id="btn">群发</button>
    <button id="btnA">私发给A</button>
</fieldset>

<script type="text/javascript">
    const socket = io.connect();
    const btn = document.getElementById("btn");
    const btnA = document.getElementById("btnA");
    const text = document.getElementById("text");

    // 监听服务端数据
    socket.on("allServer", (data) => {
        console.log("客户端接收数据：", data);
    });
    socket.on("oneServer", (data) => {
        console.log("客户端接收数据：", data);
    });

    btn.onclick = () => {
        const data = text.value;
        // 客户端发送数据
        socket.emit("allClient", data);
        text.value = "";
    };
    btnA.onclick = () => {
        const data = text.value;
        // 客户端发送数据
        socket.emit("oneClient", data);
        text.value = "";
    };
</script>
</body>
</html>