nodejsでwebsocket の変更点 - 闘うITエンジニアの覚え書き

追加された行はこの色です。
削除された行はこの色です。
nodejsでwebsocket へ行く。
* nodejsでwebsocket [#m3a85f06]
#setlinebreak(on)

#contents
-- 関連
--- [[Node.js]]
--- [[Node.jsで簡単なWebサーバを書いてみる]]

** webルートとなるディレクトリを作成 [#wfda2b72]
#myterm2(){{
mkdir socket_io_work
cd socket_io_work
}}

** sockletIOインストール [#ra21dbcd]
#myterm2(){{
npm install socket.io
}}

** サーバ処理 [#ia3cbf5f]
server.js
#mycode2(){{
var fs = require("fs");
var server = require("http").createServer(function(req, res) {
     res.writeHead(200, {"Content-Type":"text/html"});
     var output = fs.readFileSync("./index.html", "utf-8");
     res.end(output);
}).listen(8080);

var io = socketio.listen(server);
 
io.sockets.on('connection', function(socket) {
    socket.on('client_to_server', function(data) {
        io.sockets.emit('server_to_client', {value : data.value});
    }); 
});
}}

** クライアント処理 [#ne663d2b]
index.html
#myhtml2(){{
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>websocket-chat</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>   <!-- 実際にはこんなファイルはないが socket.io が動的に生成する -->
</head>
<body>
  <div class="container">
    <h1>WebSocket-Chat</h1>
      <form id="form1" class="form-inline">
        <div class="form-group">
          <label for="msgForm">メッセージ：</label>
          <input type="text" class="form-control" id="msgForm">
        </div>
          <button type="submit" class="btn btn-primary">送信</button>
      </form>
      <div id="chatLogs"></div>
  </div>
    
    <script type="text/javascript">
        var socket = io.connect();
    
        socket.on("server_to_client", function(data){appendMsg(data.value)});
    
        function appendMsg(text) {
            $("#chatLogs").append("<div>" + text + "</div>");
        }

        $("form").submit(function(e){
            var message = $("#msgForm").val();
            $("#msgForm").val('');
            socket.emit("client_to_server", {value : message});
            e.preventDefault();
        });
    </script>
</body>
</html>
}}


** 起動 [#n0e11b12]
#myterm2(){{
node server.js
}}