如何使用 Socket.io 从客户端向服务器发送命令答案

【问题标题】：How to send commands from client to server with Socket.io如何使用 Socket.io 从客户端向服务器发送命令
【发布时间】：2016-09-16 00:43:26
【问题描述】：

我想从客户端发送命令到服务器示例更改图像 url 或标签文本。我已经设法使服务器和客户端之间的连接正常工作，并且按钮单击工作，但我无法从 index.js 文件中操作 DOM。有没有可靠的方法来做到这一点？我的客户端使用 PHP 从 mySQL 数据库获取数据，我想将该数据作为数组传递给服务器并呈现给视图。到目前为止，这是我的代码：

服务器：index.js -

var express = require('express');  
var app = express();  
var http = require('http').Server(app);
var io = require('socket.io')(http);


app.get("/",function(req,res){
    res.sendFile(__dirname + '/index.html');
    app.use(express.static(__dirname));  
});

//This is auto initiated event when Client connects to Your Machien.  
io.on('connection', function(client) {
    console.log('Client connected...');

    client.on('test',function(msg){
        console.log("i can see this in cmd console");

    // i would like to do like this but it says "document is not defined"

    //document.getElementById("mediaContainer").innerHTML = "Paragraph changed!";

    });

});

http.listen(3000,function(){
    console.log("Listening on 3000");
});

客户端：app.js -

$(document).ready(function () {
    $("#button1").click(function(){
        socket.emit('test',$("#someinput").val());
    });
});

我希望它像这样工作：服务器：app.js -

$(document).ready(function () {

    var socket = io.connect('http://192.168.2.65:3000');

    socket.on('test',function(msg){
        $("#mediaContainer").append(msg);
        console.log("i cant get this to work");
    });

});

谢谢:)

【问题讨论】：

标签： javascript jquery node.js socket.io

【解决方案1】：

socket.io 有两个方面，BackEnd 和 FrontEnd。

在上面的代码中，您尝试像document.getElementById("mediaContainer").innerHTML = "Paragraph changed!"; 那样操作 DOM，但这是前端部分。

socket.io 的工作原理是您使用前端中的套接字提供的 js 向后端中的套接字将要监听的服务器发出一些东西。然后，您从 BackEnd 发出一些东西以响应接收到的发射。您还在 FrontEnd 部分添加一个侦听器到此 BackEnd 发射，最后根据接收到的发射操作 DOM。

前端

$(document).ready(function () {
  var socket = io.connect('http://192.168.2.65:3000');
  $("#button1").click(function(){
    socket.emit('test',$("#someinput").val());
  });
  socket.on('test',function(msg){
    $("#mediaContainer").append(msg);
  });
});

后端

io.on('connection', function(client) {
    console.log('Client connected...');

    client.on('test',function(msg){
        // If you want all including the sender to get emission      
        client.emit('test',  msg);      
        
        // If you want all excluding the sender to get emission
        client.broadcast.emit('test', msg);
    });

});

这应该可行。干杯！！

【讨论】：

【解决方案2】：

让它工作。必须在 socket.on 中创建一个 socket.emit，然后用另一个服务器 javascript 文件来捕获它，如下所示：

index.js：

client.on('test',function(value){
    io.sockets.emit('testi1',value);
});

app.js：

socket.on('testi1',function(msg){
    $("#mediaContainer").append(msg + '<br /><br />');
});

【讨论】：