如何使用Socket.io将命令从客户端发送到服务器

I would like to send commands from client to server example change image url or label text. I have managed to get the connection working between server & client and the button clicks to work, but i cant manipulate the DOM from the index.js file. Is there a solid way to do this? My client side uses PHP to get data from mySQL database and i'd like to pass that data as array to server and render to view. Here is my code so far:

我想从客户端发送命令到服务器示例更改图像URL或标签文本。我设法让服务器和客户端之间的连接工作,按钮点击工作,但我不能操作index.js文件中的DOM。有没有坚实的方法来做到这一点?我的客户端使用PHP从mySQL数据库获取数据,我想将该数据作为数组传递给服务器并呈现给查看。这是我到目前为止的代码:

server: index.js -

server: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");
});

client: app.js -

客户:app.js -

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

I would like it to work like this rather: server: app.js -

我希望它能像这样工作:server: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");
    });

});

Thanks :)

2 个解决方案

#1

Got it to work. Had to make a socket.emit inside the socket.on that catch it with another server javascript file like this:

得到它的工作。不得不在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 />');
});

#2

There are two sides to socket.io, BackEnd and FrontEnd.

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

In the code above, you tried to manipulate the DOM like document.getElementById("mediaContainer").innerHTML = "Paragraph changed!"; but this is the FrontEnd part.

在上面的代码中,您试图像document.getElementById(“mediaContainer”)那样操纵DOM。innerHTML =“Paragraph changed!”;但这是FrontEnd的一部分。

How socket.io works is you use js provided by socket in the FrontEnd to emit something to the server where the socket in the BackEnd will be listening to. Then, you emit something from BackEnd in response to the received emission. You also add a listener at the FrontEnd part to this BackEnd emission and finally manipulate the DOM according to the received emission.

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

FrontEnd

$(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);
  });
});

BackEnd

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);
    });

});

This should work. Cheers!!

这应该工作。干杯!!

#1