メモ帳

やったこととかちまちまと書く需要のない記事を生成している

Meteorでチャットシステム構築

JavaScript Meteor Node.js Programming

Meteorでチャットシステムを構築してみた

client.js

import { Meteor } from 'meteor/meteor'
import { Mongo } from 'meteor/mongo'

Messages = new Mongo.Collection('messages');

Template.Chat.helpers({
  messages: Messages.find({},{sort:{date:-1}})
});

Template.Chat.events({
  'submit #talk': event => {
    event.preventDefault();
    if(event.target.mes.value != "") {
      Messages.insert({
        username: event.target.name.value,
        mes_text: event.target.mes.value
      },err => {
        if(err) {
          console.log(err);
        } else {
          event.target.mes.value = "";
          console.log("add");
        }
      })
    }
  }
});

server.js

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';

Messages = new Mongo.Collection('messages');

Meteor.startup(() => {
});

main.html

<head>
    <title>Chat</title>
</head>
<body>
    
</body>

<template name="Chat">
    <h1>チャット</h1> 
    <form id="talk">
        <p>名前:<input type="text" name="name"></p>
        <p>メッセージ:<input type="text" name="mes"></p>
        <input type="submit" value="送信">
    </form>
    {{#each messages}}
        <div>
            <p>{{username}} : {{mes_text}}</p>
        </div>
    {{/each}}
</template>

client用とserver用のscriptを分けた場合、別々に宣言する必要があるらしい。client側だけで宣言したらserver側には保存されないっぽい。同じファイルに記述した場合、一番上にでも宣言しておけば問題はなさそう。

参考

qiita.com
tech-sketch.jp
Introducing Meteor API Docs | Meteor API Docs
一週間以上前に書いたコードなのでmeteorのどこのドキュメント見たかわからなくなった・・・・
DBの使い方とtemplateの使い方を把握していたらすぐ理解できると思う。