facebook twitter hatena line email

「Javascript/nodejs/socket.io/helloworld」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「==SocketIOインストール== npm install socket.io ==サーバ側== *app.js var port = 8001; var socket = require('socket.io').listen(port); // 接続イベント...」)
 
(クライアント)
行20: 行20:
 
==クライアント==
 
==クライアント==
 
*public/js/client.js
 
*public/js/client.js
<<nowiki />script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+
<nowiki>
  <<nowiki />script type="text/javascript" src="/javascripts/socket.io.js"></script>
+
<head>
  <<nowiki />script>
+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 +
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
 +
  </head>
 +
<script>
 
   // socket接続
 
   // socket接続
 
   var socket = io.connect('http://localhost:8001');
 
   var socket = io.connect('http://localhost:8001');
行36: 行39:
 
   });
 
   });
 
  </script>
 
  </script>
 +
</nowiki>
  
 
==socket.io.jsのclient-jsコピー==
 
==socket.io.jsのclient-jsコピー==

2017年11月15日 (水) 09:17時点における版

SocketIOインストール

npm install socket.io

サーバ側

  • app.js
var port = 8001;
var socket = require('socket.io').listen(port);
// 接続イベント受信
socket.on('connection', function(client) {
  console.log("ユーザ接続ID:" + client.id);
  // newsイベント発火
  client.emit('news', { hello: 'world' });
  // my otherイベント受信
  client.on('my other event', function(data) {
    console.log(data);
  });
});
console.log("port:" + port);

クライアント

  • public/js/client.js

<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script> </head> <script> // socket接続 var socket = io.connect('http://localhost:8001'); // 接続処理後 socket.on('connect', function(msg) { console.log("ユーザ接続ID:" + socket.socket.sessionid); }); // newsイベント受信 socket.on('news', function(data) { console.log(data); // my otherイベント発火 socket.emit('my other event', { my: 'data' }); }); </script>

socket.io.jsのclient-jsコピー

cp /usr/local/src/node-v0.6.8/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js javascript/socket.io.js

require.jsを使ったクライアントサンプル

  • main.js
require(['https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', 'socket.io'], function() {
  var socket = io.connect('http://localhost:8001');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
});


socket.io日本語公式

http://jxck.github.com/socket.io/