Question

请以pub / sub方式进行协作编辑器的这个小演示。场景：服务器：S 客户：A，B A发送文本S. S收到文字和brodcast给B. B将文本发送给S. S接收文字和brodcast到A，A接收文本，但document.getElementById没有更新显示。

我怀疑问题出在javascript执行顺序上...... 我有点困惑，有人能指出我的客户出了什么问题吗？

服务器：

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

    //Server accepting connect on this port
    http.listen(3000);

    //Establishing connection to client and disconnecting
    io.sockets.on('connection', function(socket){
        console.log('Connected to a new client');

        socket.on('room', function(room) {
            socket.join(room);
            console.log('join room '+ room);

        });
        socket.on('disconnect', function(){
        socket.disconnect();
        console.log('Disconnected from a client');
        });

        var room= 'room1';
        //Data exchange between client and server
        //Server receives new data from a client and broadcast it to others
        socket.on('client_character',function(msg){

        //receive data 
        console.log('Data from client'+msg.buffer);

         socket.in(room).broadcast.emit('server_character',msg.buffer);
        //socket.broadcast.to(room).emit('server_character', msg.buffer);
        //socket.to(room).emit('server_character',msg.buffer);

        });

    });

客户端：在Apache服务器上单独运行

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <title>Client</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
        <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> 
        <link rel="stylesheet" type="text/css" href="styles/style.css">
     </head>

    <body>
        <textarea id="notepad"></textarea><br/>

        <script>
        $(function () {
            var socket = io.connect('http://localhost:3000',
                        {'sync disconnect on unload':false}); 


            var room = "room1";
            socket.on('connect', function() {
            socket.emit('room', room);
            });

            //receive character from server
            socket.on('server_character',function(content){
                console.log('From Server:'+ content);
                document.getElementById('notepad').innerHTML=content; 
            });

            //For each typed character
            $('#notepad').on('keypress',function(){
                var character= $('#notepad').val();

                //send character to servers
                socket.emit('client_character',{buffer:character});
                console.log('To Server:'+ {buffer:character} );

            });


        });  
        </script>

    </body>
    </html>

的style.css：

    #notepad{
        height:500px;
        width:500px;
        font-size: 14px;
        color: brown;


    }

的package.json：

{
  "name": "collaborative",
  "version": "0.0.1",
  "description": "none",
  "dependencies": {
    "express": "^4.10.2",
    "socket.io": "^1.4.5"
  }
}

参考演示： [https://www.youtube.com/watch?v=I0iikz1F1Lk][1]

Answer 1

我在巡演代码中做了一些修改以修复输入中的一个错误并添加更多日志，这与FF和Chrome一起工作（我这里没有IE）

服务器：

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

//Server accepting connect on this port
http.listen(3000);

//Establishing connection to client and disconnecting
io.sockets.on('connection', function(socket){
    console.log('Connected to a new client');

    socket.on('error', function(err) {
        //here i change options
        console.log('Error!', err);
    });

    socket.on('room', function(room) {
        socket.join(room);
        console.log('join room: '+ room);
    });
    socket.on('disconnect', function(){
        // socket.disconnect();
        console.log('Disconnected from a client');
    });

    var room= 'room1';
    //Data exchange between client and server
    //Server receives new data from a client and broadcast it to others
    socket.on('client_character',function(msg){
        //receive data
        console.log('Data from client: '+msg.buffer);

        socket.in(room).broadcast.emit('server_character',msg.buffer);
        //socket.broadcast.to(room).emit('server_character', msg.buffer);
        //socket.to(room).emit('server_character',msg.buffer);

    });

});

客户端：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Client</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <link rel="stylesheet" type="text/css" href="styles/style.css">
 </head>

<body>
    <textarea id="notepad"></textarea><br/>

    <script>
    $(function () {
        var socket = io.connect('http://localhost:3000',
                    {'sync disconnect on unload':false});


        var room = "room1";
        socket.on('connect', function() {
        socket.emit('room', room);
        });

        //receive character from server
        socket.on('server_character',function(content){
            console.log('From Server:'+ content);
            document.getElementById('notepad').innerHTML=content;
        });

        //For each typed character
        $('#notepad').on('keyup',function(){
            var character= $('#notepad').val();

            //send character to servers
            socket.emit('client_character', {buffer:character});
            console.log('To Server:', { buffer:character } );
        });


    });
    </script>

</body>
</html>

协作编辑：document.getElementById不更新显示

1 个答案: