初步使用socket.io.js

最新推荐文章于 2024-10-05 22:52:35 发布

笑看风云不留痕

最新推荐文章于 2024-10-05 22:52:35 发布

阅读量1.1w

点赞数 4

文章标签： js

原文链接：https://www.cnblogs.com/limitcode/p/7845168.html

版权

1.安装node.js

百度下载node.js安装文件，然后安装

2.创建项目

在这里插入图片描述

3.创建cmd进到项目里拉插件

在这里插入图片描述
拉插件

npm install socket.io
npm install express

4.粘贴代码

service.js:

var http = require("http");
var express = require("express"); //引入express
var socketIo = require("socket.io"); //引入socket.io


var app = new express();
var server = http.createServer(app);
var io = new socketIo(server); //将socket.io注入express模块



app.use(express.static(__dirname));
//客户端 1 的访问地址
app.get("/client1", function (req, res, next) {
    res.sendFile(__dirname + "/html/client1.html");
});
//客户端 2 的访问地址
app.get("/client2", function (req, res, next) {
    res.sendFile(__dirname + "/html/client2.html");
});


server.listen(9000); //express 监听 9000 端口，因为本机80端口已被暂用
//每个客户端socket连接时都会触发 connection 事件
io.on("connection", function (clientSocket) {
    // socket.io 使用 emit(eventname,data) 发送消息，使用on(eventname,callback)监听消息
    //监听客户端发送的 sendMsg 事件
    clientSocket.on("sendMsg", function (data) {
        // data 为客户端发送的消息，可以是 字符串，json对象或buffer
        // 使用 emit 发送消息，broadcast 表示 除自己以外的所有已连接的socket客户端。
        clientSocket.broadcast.emit("receiveMsg", data);
    })
});

client1.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>客户端1</title>
</head>

<body>
    <label>聊天内容:</label><br />
    <textarea id="content" style="height: 200px; width:300px;"></textarea>
    <br />
    <input id="sendMsg" type="text" />
    <button id="btn_send">发送</button>

    <!-- 首先引入 socket.io 客户端脚本,这个地方拉的是服务端的，不是静态资源哦，这里很重要-->
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
        var socket = io.connect(); //连接服务端，因为本机使用localhost 所以connect(url)中url可以不填或写 http://localhost
        // 监听 receiveMsg 事件，用来接收其他客户端推送的消息
        socket.on("receiveMsg", function (data) {
            content.value += data.client + ":" + data.msg + "\r\n";
        });
        var content = document.getElementById("content");
        var sendMsg = document.getElementById("sendMsg");
        var btn_send = document.getElementById("btn_send");
        btn_send.addEventListener("click", function () {
            var data = {
                client: "客户端1",//客户端名称
                msg: sendMsg.value
            };
            //给服务端发送 sendMsg事件名的消息
            socket.emit("sendMsg", data);
            content.value += data.client + ":" + data.msg + "\r\n";
            sendMsg.value = "";
        });
    </script>

</body>

</html>

client2.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>客户端2</title>
</head>

<body>
    <label>聊天内容:</label><br />
    <textarea id="content" style="height: 200px; width:300px;"></textarea>
    <br />
    <input id="sendMsg" type="text" />
    <button id="btn_send">发送</button>

    <!-- 首先引入 socket.io 客户端脚本-->
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
        var socket = io.connect(); //连接服务端，因为本机使用localhost 所以connect(url)中url可以不填或写 http://localhost
        // 监听 receiveMsg 事件，用来接收其他客户端推送的消息
        socket.on("receiveMsg", function (data) {
            content.value += data.client + ":" + data.msg + "\r\n";
        });
        var content = document.getElementById("content");
        var sendMsg = document.getElementById("sendMsg");
        var btn_send = document.getElementById("btn_send");
        btn_send.addEventListener("click", function () {
            var data = {
                client: "客户端2",
                msg: sendMsg.value
            };
            //给服务端发送 sendMsg事件名的消息
            socket.emit("sendMsg", data);
            content.value += data.client + ":" + data.msg + "\r\n";
            sendMsg.value = "";
        });
    </script>

</body>

</html>