Last active
May 26, 2016 10:53
-
-
Save comoc/1bc1683b717dafe86974 to your computer and use it in GitHub Desktop.
node+socket.io+expressでサーバーとWebページ間で通信するためのスニペット ref: http://qiita.com/comocc/items/70358fc8e17df7a15098
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| . | |
| |-- index.html | |
| |-- index.js | |
| |-- node_modules | |
| |-- package.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| mkdir server&&cd $_ | |
| npm init | |
| npm install express --save | |
| npm install socket.io --save |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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; } | |
| </style> | |
| </head> | |
| <body> | |
| <ul id="messages"></ul> | |
| <form action=""> | |
| <input id="m" autocomplete="off" /><button>Send</button> | |
| </form> | |
| <!-- socket.ioをロードする --> | |
| <script src="/socket.io/socket.io.js"></script> | |
| <script src="http://code.jquery.com/jquery-1.11.1.js"></script> | |
| <script> | |
| 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)); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var express = require('express'); | |
| var app = express(); | |
| var http = require('http').Server(app); | |
| var io = require('socket.io')(http); | |
| // index.htmlから読み込まれている静的ファイルを送れるようにしておく | |
| app.use(express.static(__dirname)); | |
| // GETされたらindex.htmlを送信する | |
| app.get('/', function(req, res){ | |
| res.sendfile('index.html'); | |
| }); | |
| // クライアントからの接続を待つ | |
| io.on('connection', function(socket){ | |
| console.log('a user connected'); | |
| socket.on('disconnect', function(){ | |
| console.log('user disconnected'); | |
| }); | |
| // クライアントからメッセージを受け取ったら投げ返す | |
| socket.on('chat message', function(msg){ | |
| // 同じクライアントに送信する場合は socket.emit を io.emit に変える | |
| socket.emit('chat message', msg); | |
| }); | |
| }); | |
| // サーバーをポート3000番で起動 | |
| http.listen(3000, function(){ | |
| console.log('listening on *:3000'); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment