尝试使用套接字从 javascript 服务器向客户端发送字符串消息；当按下 HTML 按钮时

Question

我是这个领域的新手，如果我不能很好地解释我的问题，请原谅我。

我实际上是在尝试发送字符串 "Hello, I connected to the port" 到我的 Javascript 客户端，只有当我按下 HTML 按钮。

出于测试目的：

我已经成功运行建立了客户端和服务器Javascript套接字连接，并且可以来回接收数据。但是，当我尝试将此 link 发送到我的 html 页面时，我无法连接它们并发送数据。

CLIENT.JS:

const net = require('net');

const client = net.createConnection({ port: 9898 }, () => {
  console.log('CLIENT: I connected');
  client.write('CLIENT: Hello this is client!');
});

client.on('data', (data) => {
  console.log(data.toString());
  client.end();
});

client.on('end', () => {
  console.log('CLIENT: I disconnected from the server.');
});

SERVER.JS

const net = require('net');

const server = net.createServer((socket) => {
 socket.on('data', (data) => {
  console.log(data.toString());
 });
 
 socket.write('SERVER: Hello! \n');
 socket.end('SERVER: Closing connection now \n');
}).on('error', (err) => {
  console.error(err);
});

server.listen(9898, () => {
 console.log('opened server on', server.address().port);
});

如果您保存上面的代码并运行它们使用以下行：

node server.js
node client.js

你会发现他们之间的消息传递非常好。

当我尝试运行我的 html 页面（使用端口 8083 上的 node.JS 提供）
（我使用 npx http-server --cors 服务器 HTML 页面）

我尝试的一种方法是将 client.js 中的代码放入一个函数中，然后在我的 html 按钮中调用它：

<input type = "button" onclick = "outputData()" value = "Display">

（outputData是客户端服务器中包含代码的函数）

我不确定它是否可以完成，但我想基本上从我的 HTML 开始我的 server.js页面，当单击按钮时，它可以开始发送数据。我想在终端上运行 “节点 client.js” 并看到消息正在通过，因为 server.js 会从我的网页开始

如有任何建议，我们将不胜感激。感谢您抽出宝贵时间。

Answer 1

有关 socket.io 图书馆的信息，https://socket.io/docs/v3/client-api/index.html

正在发送消息index.html

        <html>
   <body>
      <input type="button" onclick="javascript:sendMessage()" value="Click here"/> 
      <script>
         const sendMessage = () => {
             var new_message = {message: "this is my message"}
             socket.emit('new_message', new_message);
         }
         
      </script>
      <script src="/socket.io/socket.io.js"></script>
      <script>
         const socket = io("http://localhost:8080");
      </script>
   </body>
</html>

server.js

socket.on('new_message', (data) => {
    var New_Details = {  
        message: data.message  
    }; 

    socket.broadcast.emit('update_message', New_Details);
    console.log(data.username + ' just wrote ' + data.message);
});

Answer 2

我设法通过使用 Websockets 解决了这个问题。我的网络服务器充当客户端，我将 server.js 调整为以下内容：

SERVER.JS

const WebSocket = require("ws");

const wss = new WebSocket.Server({ port: 9898 });

wss.on("connection", ws => {
    console.log("New client connected!");
    
    ws.on("message", data => {
       console.log(`Client has sent us: ${data}`);
       
       ws.send(data.toUpperCase());
    });
    
    ws.on("close", () => {
       console.log("Client has disconnected!");
    });

});

HTML

<!DOCTYPE HTML>

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="/assets/dcode.css">
      <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
      <title>WebSockets</title>
   </head>
   
   <body>
      
      <script>
        const ws = new WebSocket("ws://localhost:9898");
        
        ws.addEventListener("open", () => {
           console.log("We are connected!");
           
           ws.send("Hey, how's it going?");
        });
        
        ws.addEventListener("message", ({ data }) => {
           console.log(data);
        });
      </script>
   </body>
</html>

尝试使用套接字从 javascript 服务器向客户端发送字符串消息；当按下 HTML 按钮时

Trying to send a string message from javascript server to client using sockets; when pressing HTML button

html

javascript

sockets

node.js

server