nodejsでwebsocket

webルートとなるディレクトリを作成

mkdir socket_io_work
cd socket_io_work

sockletIOインストール

npm install socket.io

サーバ処理

server.js

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});
    }); 
});

クライアント処理

index.html

<!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>

起動

node server.js

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-08-04 (木) 21:41:03 (1720d)