在节点js中使用套接字连接事件答案

【问题标题】：Connecting events using socket in node js在节点js中使用套接字连接事件
【发布时间】：2021-11-02 01:54:52
【问题描述】：

对 nodejs 非常陌生，在这里寻求帮助。我有三个文件 index.html、server.js 和 client.js。我创建了一个套接字来实时运行我的应用程序，即在用户输入的 id="add" 的 div 标签中显示消息。用户在 id="element" 的输入字段中输入消息，当单击 id="send_data" 的按钮时应该显示消息。任何帮助，将不胜感激。即将用新的js开始我的新旅程。我在客户端只使用js，根本没有任何框架每个人甚至所有者都可以看到该消息：这是我的代码 index.html：

    <div class="row">
        <div class="col-md-6">
                <p><input class="form-control" id="element" type="text" value="Les parties"></p>
        </div>
        <div class="col-md-6">
            <button class="btn btn-primary" id="send_data">Ajouter</button>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-8">
        <div id="add"></div>
    </div>

这里是 server.js

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);



app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});



io.on('connection', (socket) => {
  socket.on('message',  => {
    io.emit('message', "Hello word");
    console.log('displaying message')
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

最后是client.js

let url = 'http://localhost:3000/';
 var socket = io();
 var socket = io.connect(url)
 let counter = 0;
let add = document.getElementById("add");
let element = document.getElementById("element")

 add.addEventListener('click', function(event){
    add.innerHTML = element.value;
    socket.emit('message', element.value);
 })

【问题讨论】：

标签： javascript node.js nodes node-modules monodevelop

【解决方案1】：

我假设根据您的代码，您需要将 client.js 放在公共文件夹中。我假设你有你的 node_modules、package.json 等等。所以在你的 public/client.js

let url = 'http://localhost:3000/';
 var socket = io();
 var socket = io.connect(url)
let add = document.getElementById("add");
let btn = document.getElementById('send_data')

 btn.addEventListener('click', function(event){
    add.innerHTML += `<li>${element.value}</li>` ;
    socket.emit('message', element.value);
 })

 socket.on('message', (m) => {
    alert("message from the server: "+ m)
 })

在您的 server.js

中

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);


app.use('/static', express.static('public'))

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});



io.on('connection', (socket) => {
  console.log("socket connected: ", socket.id)
  socket.on('message', (message) => {
    // emit message from the server
    io.emit('message', "Hello word");
    console.log(`message ${socket.id}: `, message)
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

在您的 index.html 中。您必须从客户端导入 socket.js。在这种情况下，您不能从 node_modules 导入它，因为它将在浏览器中运行。您可以在提供之前使用 webpack 或其他捆绑器对其进行捆绑。因为我们没有使用 webpack 来做到这一点。你需要像这样从cdn中获取它

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="row">
        <div class="col-md-6">
                <p><input class="form-control" id="element" onclick="me" type="text" value="Les parties" /></p>
        </div>
        <div class="col-md-6">
            <button class="btn btn-primary" id="send_data">Ajouter</button>
        </div>
    </div>
    </div>
    <div class="row">
    <div class="col-md-8">
        <div id="add-cont">
            <ul id="add"></ul>
        </div>
    </div>
</body>
</html>
<script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script>
<script src="./static/client.js"> </script>

【讨论】：