インストール
npm install socket.io
express側の設定
soke関連の記述
const express = require('express') const socketio = require( 'socket.io' ) const app = express() const server = app.listen(3000, () => console.log('Example app listening on port 3000!')) // テンプレートエンジンはejsを利用します app.set("view engine", "ejs"); // サーバーをソケットの紐づけ var io = socketio.listen( server ); io.sockets.on( 'connection', function( socket ) { // 自分と接続している全員に送信する socket.on( 'c2s_message', function( data ) { // サーバーからクライアントへ メッセージを送り返し io.sockets.emit( 'message', { value : data.value } ); }); // 自分以外の接続している他のひとに送る socket.on( 'broadcast', function( data ) { // サーバーからクライアントへ メッセージを送り返し socket.broadcast.emit( 's2c_message', { value : data.value } ); }); }); // chat画面の表示 app.get('/', function(req, res){ res.render("index"); });
view(HTML)側の設定
<div id="message"></div> <input type="text" id="messageInput"> <button type="button" id="sendMessage">自分と接続しているみんなに送信</button> <button type="button" id="sendMessageBroadcast">自分以外の接続するみんなに送信</button> <script type="text/javascript" src="/src/jquery.min.js"></script> <script type="text/javascript" src="/socket.io/socket.io.js"></script> <script> var ioSocket = io.connect( "http://localhost:3000" ); ioSocket.on( "connect", function() {} ); ioSocket.on( "disconnect", function() {} ); // サーバーからクライアントへの送り返し ioSocket.on( "message", function( data ) { appendMessage( data.value ) }); // 画面にメッセージを追記 function appendMessage( text ) { $("#message").append( "<div>" + text + "</div>" ); } // 自分と接続している全員にコメントを送信 $("#sendMessage").click( function() { // メッセージの内容を取得し、その後フォームをクリア var message = $("#messageInput").val(); $("#messageForm").val(""); // クライアントからサーバーへ送信 ioSocket.emit( "message", { value : message } ); }); // 自分以外の接続しているユーザーにコメントを送信 $("#sendBroadcast").click( function() { // メッセージの内容を取得し、その後フォームをクリア var message = $("#messageInput").val(); $("#messageInput").val(""); // クライアントからサーバーへ送信 ioSocket.emit( "broadcast", { value : message } ); }); </script>