「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> | |
− | < | + | <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接続 | // 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' }); }); });