[node.js] 가장 간단한 Socket.io 예제의 예는 무엇입니까?

Program / 글쓴이

그래서 저는 최근에 Socket.io를 이해하려고 노력했지만 저는 훌륭한 프로그래머가 아니며 웹에서 찾을 수있는 거의 모든 예제 (저는 몇 시간 동안 찾아 봤다고 믿습니다)에는 상황을 복잡하게 만드는 추가 항목이 있습니다. 많은 예제가 나를 헷갈 리게하거나 이상한 데이터베이스에 연결하거나 커피 스크립트를 사용하거나 일을 복잡하게 만드는 수많은 JS 라이브러리를 사용합니다.

서버가 10 초마다 클라이언트에게 메시지를 보내고 시간을 알려주고 클라이언트가 해당 데이터를 페이지에 쓰거나 매우 간단한 경고를 표시하는 기본적인 작동 예제를보고 싶습니다. 그런 다음 거기에서 알아낼 수 있고, db 연결과 같은 필요한 것을 추가 할 수 있습니다. 그리고 예, socket.io 사이트에서 예제를 확인했지만 작동하지 않으며 그들이 무엇을하는지 이해하지 못합니다. .

답변

편집 : 누구나 훌륭한 채팅 예제 를 참조하는 것이 더 낫다고 생각합니다. Socket.IO 시작하기 페이지 . 이 답변을 제공 한 이후로 API가 상당히 단순화되었습니다. 즉, 다음은 최신 API에 대해 작게 업데이트 된 원래 답변입니다.

오늘 기분이 좋기 때문에

index.html

<!doctype html>
<html>
    <head>
        <script src='/socket.io/socket.io.js'></script>
        <script>
            var socket = io();

            socket.on('welcome', function(data) {
                addMessage(data.message);

                // Respond with a message including this clients' id sent from the server
                socket.emit('i am client', {data: 'foo!', id: data.id});
            });
            socket.on('time', function(data) {
                addMessage(data.time);
            });
            socket.on('error', console.error.bind(console));
            socket.on('message', console.log.bind(console));

            function addMessage(message) {
                var text = document.createTextNode(message),
                    el = document.createElement('li'),
                    messages = document.getElementById('messages');

                el.appendChild(text);
                messages.appendChild(el);
            }
        </script>
    </head>
    <body>
        <ul id='messages'></ul>
    </body>
</html>

app.js

var http = require('http'),
    fs = require('fs'),
    // NEVER use a Sync function except at start-up!
    index = fs.readFileSync(__dirname + '/index.html');

// Send index.html to all requests
var app = http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(index);
});

// Socket.io server listens to our app
var io = require('socket.io').listen(app);

// Send current time to all connected clients
function sendTime() {
    io.emit('time', { time: new Date().toJSON() });
}

// Send current time every 10 secs
setInterval(sendTime, 10000);

// Emit welcome message on connection
io.on('connection', function(socket) {
    // Use socket to communicate with this particular client only, sending it it's own id
    socket.emit('welcome', { message: 'Welcome!', id: socket.id });

    socket.on('i am client', console.log);
});

app.listen(3000);

답변

여기 내 제출입니다!

이 코드를 hello.js라는 파일에 넣고 hello.js 노드를 사용하여 실행하면 hello 메시지를 출력해야하며 2 개의 소켓을 통해 전송되었습니다.

이 코드는 // Mirror라는 코드 섹션을 통해 클라이언트에서 서버로 반송 된 hello 메시지의 변수를 처리하는 방법을 보여줍니다.

변수 이름은 주석 사이의 각 섹션에서만 사용되기 때문에 맨 위에있는 것이 아니라 로컬로 선언됩니다. 이들 각각은 별도의 파일에있을 수 있으며 자체 노드로 실행될 수 있습니다.

// Server
var io1 = require('socket.io').listen(8321);

io1.on('connection', function(socket1) {
  socket1.on('bar', function(msg1) {
    console.log(msg1);
  });
});

// Mirror
var ioIn = require('socket.io').listen(8123);
var ioOut = require('socket.io-client');
var socketOut = ioOut.connect('http://localhost:8321');


ioIn.on('connection', function(socketIn) {
  socketIn.on('foo', function(msg) {
    socketOut.emit('bar', msg);
  });
});

// Client
var io2 = require('socket.io-client');
var socket2 = io2.connect('http://localhost:8123');

var msg2 = "hello";
socket2.emit('foo', msg2);

스 니펫 확장

답변

아마도 이것은 당신에게도 도움이 될 것입니다. socket.io가 작동하는 방식에 머리를 감는 데 어려움이 있었기 때문에 가능한 한 예제를 끓이려고 노력했습니다.

여기에 게시 된 예제에서이 예제를 수정했습니다. http://socket.io/get-started/chat/

먼저 빈 디렉토리에서 시작하고 package.json 이라는 매우 간단한 파일을 만듭니다. 그 안에 다음을 배치합니다.

{
"dependencies": {}
}

다음으로, 명령 줄에서 npm을 사용하여이 예제에 필요한 종속성을 설치합니다.

$ npm install --save express socket.io

네트워크 연결 속도 / CPU 등에 따라 몇 분 정도 걸릴 수 있습니다. 모든 것이 계획대로 진행되었는지 확인하려면 package.json 파일을 다시 볼 수 있습니다 .

$ cat package.json
{
  "dependencies": {
    "express": "~4.9.8",
    "socket.io": "~1.1.0"
  }
}

server.js 라는 파일을 만듭니다. 이것은 분명히 노드별로 실행되는 서버입니다. 다음 코드를 삽입하십시오.

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

app.get('/', function(req, res){

  //send the index.html file for all requests
  res.sendFile(__dirname + '/index.html');

});

http.listen(3001, function(){

  console.log('listening on *:3001');

});

//for testing, we're just going to send data to the client every second
setInterval( function() {

  /*
    our message we want to send to the client: in this case it's just a random
    number that we generate on the server
  */
  var msg = Math.random();
  io.emit('message', msg);
  console.log (msg);

}, 1000);

index.html 이라는 마지막 파일을 만들고 여기에 다음 코드를 삽입합니다.

<html>
<head></head>

<body>
  <div id="message"></div>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();

    socket.on('message', function(msg){
      console.log(msg);
      document.getElementById("message").innerHTML = msg;
    });
  </script>
</body>
</html>

이제이 매우 간단한 예제를 테스트하고 다음과 유사한 출력을 볼 수 있습니다.

$ node server.js
listening on *:3001
0.9575486415997148
0.7801907607354224
0.665313188219443
0.8101786421611905
0.890920243691653

웹 브라우저를 열고 노드 프로세스를 실행중인 호스트 이름을 가리키면 동일한 페이지를보고있는 다른 연결된 브라우저와 함께 브라우저에 동일한 번호가 표시되어야합니다.

답변

나는이 게시물이 이제 몇 년이 지난 것을 알고 있지만, 때때로 저와 같은 인증 된 초보자에게는 가장 단순한 형태로 완전히 제거 된 작업 예제가 필요합니다.

모든 간단한 socket.io 예제가 관련 http.createServer ()를 찾을 수 있습니다. 하지만 기존 웹 페이지에 socket.io 마법을 포함하려면 어떻게해야할까요? 여기 내가 생각해 낼 수있는 가장 쉽고 작은 예가 있습니다.

이것은 콘솔 UPPERCASED에서 전달 된 문자열을 반환합니다.

app.js

var http = require('http');

var app = http.createServer(function(req, res) {
        console.log('createServer');
});
app.listen(3000);

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


io.on('connection', function(socket) {
    io.emit('Server 2 Client Message', 'Welcome!' );

    socket.on('Client 2 Server Message', function(message)      {
        console.log(message);
        io.emit('Server 2 Client Message', message.toUpperCase() );     //upcase it
    });

});

index.html :

<!doctype html>
<html>
    <head>
        <script type='text/javascript' src='http://localhost:3000/socket.io/socket.io.js'></script>
        <script type='text/javascript'>
                var socket = io.connect(':3000');
                 // optionally use io('http://localhost:3000');
                 // but make *SURE* it matches the jScript src
                socket.on ('Server 2 Client Message',
                     function(messageFromServer)       {
                        console.log ('server said: ' + messageFromServer);
                     });

        </script>
    </head>
    <body>
        <h5>Worlds smallest Socket.io example to uppercase strings</h5>
        <p>
        <a href='#' onClick="javascript:socket.emit('Client 2 Server Message', 'return UPPERCASED in the console');">return UPPERCASED in the console</a>
                <br />
                socket.emit('Client 2 Server Message', 'try cut/paste this command in your console!');
        </p>
    </body>
</html>

실행하려면 :

npm init;  // accept defaults
npm  install  socket.io  http  --save ;
node app.js  &

이 포트 테스트 와 같은 것을 사용 하여 포트가 열려 있는지 확인하십시오.

이제 http : //localhost/index.html로 이동 하고 브라우저 콘솔을 사용하여 서버로 메시지를 다시 보냅니다.

아마도 http.createServer를 사용할 때 다음 두 줄을 변경합니다.

<script type='text/javascript' src='/socket.io/socket.io.js'></script>
var socket = io();

이 매우 간단한 예제가 내 동료 초보자들에게 어려움을 겪지 않기를 바랍니다. 그리고 내 소켓 정의에 대해 사용자 정의 변수 이름을 찾는 “예약 된 단어”를 사용하는 것을 멀리했습니다.

답변

index.html

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      #messages { margin-bottom: 40px }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      $(function () {
        var socket = io();
        $('form').submit(function(){
          socket.emit('chat message', $('#m').val());
          $('#m').val('');
          return false;
        });
        socket.on('chat message', function(msg){
          $('#messages').append($('<li>').text(msg));
          window.scrollTo(0, document.body.scrollHeight);
        });
      });
    </script>
  </body>
</html>

index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 3000;

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

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

http.listen(port, function(){
  console.log('listening on *:' + port);
});

그리고 응용 프로그램을 실행하려면 다음 명령 을 실행하십시오.

npm init;  // accept defaults
npm  install  socket.io  http  --save ;
node start

URL 열기 :- http://127.0.0.1:3000/포트가 다를 수 있습니다. 이 OUTPUT 을 볼 수 있습니다.

여기에 이미지 설명 입력

답변