Socket.IO-イベント処理

ソケットはイベントに基づいて機能します。サーバー側のソケットオブジェクトを使用してアクセスできる予約済みのイベントがいくつかあります。

これらは-

接続する
メッセージ
切断する
再接続
Ping
参加して
立ち去る

クライアント側のソケットオブジェクトは、いくつかの予約済みイベントも提供します。

接続する
Connect_error
Connect_timeout
再接続など

Hello Worldの例では、接続イベントと切断イベントを使用して、ユーザーが接続して離れたときにログを記録しました。ここで、メッセージイベントを使用して、サーバーからクライアントにメッセージを渡します。これを行うには、 io.on （ 'connection'、function（socket））呼び出しを変更して、次のものを含めます-

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

app.get('/', function(req, res) {
   res.sendfile('indexl');
});

io.on('connection', function(socket) {
   console.log('A user connected');

  //Send a message after a timeout of 4seconds
   setTimeout(function() {
      socket.send('Sent a message 4seconds after connection!');
   }, 4000);

   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});

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

これにより、クライアントが接続してから4秒後に、* message（built in）*というイベントがクライアントに送信されます。ソケットオブジェクトの送信関数は、「メッセージ」イベントを関連付けます。

次に、クライアント側でこのイベントを処理する必要があります。したがって、次のコードを含めるようにindexlスクリプトタグを編集します-

<script>
   var socket = io();
   socket.on('message', function(data){document.write(data)});
</script>

現在、クライアントで「メッセージ」イベントを処理しています。ブラウザのページに移動すると、次のスクリーンショットが表示されます。

以前のイベント

4秒が経過し、サーバーがメッセージイベントを送信した後、クライアントはそれを処理し、次の出力を生成します-

後のイベント

注-ここにテキスト文字列を送信しました。どんなイベントでもオブジェクトを送信できます。

メッセージはAPIによって提供される組み込みイベントでしたが、イベントを区別できるようにする必要があるため、実際のアプリケーションではあまり役に立ちません。

これを可能にするために、Socket.IOは*カスタムイベント*を作成する機能を提供します。 socket.emit 関数を使用して、カスタムイベントを作成および起動できます。

たとえば、次のコードは testerEvent というイベントを生成します-

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

app.get('/', function(req, res) {
   res.sendfile('indexl');
});

io.on('connection', function(socket) {
   console.log('A user connected');

  //Send a message when
   setTimeout(function() {
     //Sending an object when emmiting an event
      socket.emit('testerEvent', { description: 'A custom event named testerEvent!'});
   }, 4000);

   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});

http.listen(3000, function() {
   console.log('listening on localhost:3000');
});

クライアントでこのカスタムイベントを処理するには、イベントtesterEventをリッスンするリスナーが必要です。次のコードは、クライアントでこのイベントを処理します-

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <script src = "/socket.io/socket.io.js"></script>

   <script>
      var socket = io();
      socket.on('testerEvent', function(data){document.write(data.description)});
   </script>
   <body>Hello world</body>
</html>

これは前の例と同じように機能し、この場合のイベントはtesterEventです。ブラウザを開いてlocalhost：3000にアクセスすると、次のメッセージが表示されます-

Hello world

4秒後、このイベントが発生し、ブラウザのテキストが変更されます-

A custom event named testerEvent!

クライアントからイベントを発行することもできます。クライアントからイベントを発行するには、ソケットオブジェクトで発行機能を使用します。

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <script src = "/socket.io/socket.io.js"></script>

   <script>
      var socket = io();
      socket.emit('clientEvent', 'Sent an event from the client!');
   </script>
   <body>Hello world</body>
</html>

これらのイベントを処理するには、サーバーのソケットオブジェクトで on function を使用します。

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

app.get('/', function(req, res) {
   res.sendfile('indexl');
});

io.on('connection', function(socket) {
   socket.on('clientEvent', function(data) {
      console.log(data);
   });
});

http.listen(3000, function() {
   console.log('listening on localhost:3000');
});

そのため、localhost：3000に移動すると、 clientEvent というカスタムイベントが発生します。このイベントは、ロギングによってサーバー上で処理されます-

Sent an event from the client!

Socket.io-event-handling

Socket.IO-イベント処理