Kemalでチャットを作ってみる

WebFramework

kyamashita

2019.08.23

こんにちわ。

最近あんまりコーディングしてない気がするkyamaです。

今回はCrystalのWeb FrameworkであるKemalを使って簡単なチャットを作ってみました。

インストール

CrystalとKemalを触ってみる

作成

# crystal init app chat

# cd chat

# vim shard.yml
dependencies:
  kemal:
    github: kemalcr/kemal
    version: 0.25.2 ★0.26バージョンだと不具合あるようなので、0.25.2を指定しました。

# shards install

トップとウェブソケット記載

# vim src/chat.cr
require "kemal"
SOCKETS = [] of HTTP::WebSocket
get "/" do
  render "views/index.ecr"
end
ws "/chat" do |socket|
  SOCKETS << socket
  socket.on_message do |message|
    SOCKETS.each { |socket| socket.send message }
  end
  socket.on_close do
    SOCKETS.delete socket
  end
end
Kemal.run

ビュー作成

# mkdir views
# vim views/index.ecr
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>chat</title>
</head>
<body>
  <pre id="chat"></pre>
  <form>
    <input id="msg">
    <input type="submit" value="send">
  </form>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function(){
      var ws = new WebSocket("ws://IP:3000/chat"); ★実行している環境のIPを記載してください
      ws.onmessage = function(e) {
        $("#chat").append(e.data + "<br>");
      };
      $("form").bind("submit", function(e){
        var message = $("#msg").val();
        ws.send(message);
        $("#msg").val("");
        $("#msg").focus();
        e.preventDefault();
      });
      window.onbeforeunload = function() {
        websocket.onclose = function(){};
        websocket.close();
      };
    });
  </script>
</body>
</html>