「Javascript/nodejs/socket.io/helloworld」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→サーバ側) |
(→require.jsを使ったクライアントサンプル) |
||
| (同じ利用者による、間の3版が非表示) | |||
| 行5: | 行5: | ||
*app.js | *app.js | ||
var port = 8001; | var port = 8001; | ||
| − | var | + | var socketio = require('socket.io').listen(port); |
// 接続イベント受信 | // 接続イベント受信 | ||
| − | + | socketio.on('connection', function(client) { | |
| − | console.log(" | + | console.log("user_id:" + client.id); |
// newsイベント発火 | // newsイベント発火 | ||
client.emit('news', { hello: 'world' }); | client.emit('news', { hello: 'world' }); | ||
| 行17: | 行17: | ||
}); | }); | ||
console.log("port:" + port); | console.log("port:" + port); | ||
| − | |||
| − | |||
| − | |||
==クライアント== | ==クライアント== | ||
| 行34: | 行31: | ||
// 接続処理後 | // 接続処理後 | ||
socket.on('connect', function(msg) { | socket.on('connect', function(msg) { | ||
| − | console.log(" | + | console.log("user_id:" + socket.id); |
}); | }); | ||
// newsイベント受信 | // newsイベント受信 | ||
| 行51: | 行48: | ||
==require.jsを使ったクライアントサンプル== | ==require.jsを使ったクライアントサンプル== | ||
*main.js | *main.js | ||
| − | require(['https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', 'socket.io'], function() { | + | require(['https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js'], function() { |
var socket = io.connect('http://localhost:8001'); | var socket = io.connect('http://localhost:8001'); | ||
socket.on('news', function (data) { | socket.on('news', function (data) { | ||
| 行58: | 行55: | ||
}); | }); | ||
}); | }); | ||
| − | |||
==socket.io日本語公式== | ==socket.io日本語公式== | ||
http://jxck.github.com/socket.io/ | http://jxck.github.com/socket.io/ | ||
2017年11月16日 (木) 01:47時点における最新版
目次
SocketIOインストール
npm install socket.io
サーバ側
- app.js
var port = 8001;
var socketio = require('socket.io').listen(port);
// 接続イベント受信
socketio.on('connection', function(client) {
console.log("user_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
<html> <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> <body> <script> // socket接続 var socket = io.connect('http://localhost:8001'); // 接続処理後 socket.on('connect', function(msg) { console.log("user_id:" + socket.id); }); // newsイベント受信 socket.on('news', function(data) { console.log(data); // my otherイベント発火 socket.emit('my other event', { my: 'data' }); }); </script> </body> </html>
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', 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js'], function() { var socket = io.connect('http://localhost:8001'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); });
