Question

所以我的客户端有一个socket-io脚本，只需要完成连接服务器的简单任务。到目前为止，非常好。

我想要做的是仅在用户点击按钮时加载包含socket.io的javascript脚本，而不是在浏览器解析页面时加载。

这是client.html：

<html>

<head>
    <meta charset="utf-8" />

    <title>Socket.io</title>
</head>

<body>

    <h1>Communicating with socket .io!</h1>

    <div>
        <form>
            <input id="wawa" type="text" name="firstname" value="">
            <button onclick="get_data()">Send data to server</button>
        </form>
    </div>

    <script src="socket-io.js"></script>

    <script>
        let socket = io.connect('http://localhost:5000');

        function get_data() {
            socket.on('connect', function() {
                console.log('Connected to the server');
            });
        }
    </script>

</body>

</html>

server.js是否有帮助？

let io = require('socket.io').listen(process.env.port||5000);

io.on('connection', function(socket) {

    console.log('New client connected');

    socket.on('wawa',function (data) {
        console.log(`data received is '${data}'`);
    });

基本上，我不是在解析页面时加载的JS脚本，而是仅在单击按钮时加载。

我怎样才能做到这一点？

Answer 1

在HTML文件的JavaScript区域中，您可以执行以下操作：

<script>
    var socket;

    function loadSocket() {
        socket = io.connect('http://localhost:5000');
    }

    function get_data() {
        socket.on('connect', function() {
            console.log('Connected to the server');
        });
    }
</script>

在您的HTML代码中，您可以使用一个按钮来调用loadSocket：

<button onclick="loadSocket();">Connect</button>

如何只在用户点击按钮时在HTML中加载socket.io脚本？

1 个答案: