3 : 作聊天室①

上章 : 作訊息

Coffeecup header3

0 : 這個章的目的

 在上章,在各個會員的網頁的「show」網頁上顯示留言版跟訊息。

在這裡設定不用留言版反而用聊天室,顯示訊息吧。
Chrome messages rooms 1 present messages
 在這裡解釋要作的網頁吧。

移動到自己的會員網頁「show」網頁「0.0.0.0:3000/users/1,會顯示下面一樣的 看聊天室一覽 的顯示, Chrome messages users 1 rooms link 移動到別人的網頁(例如說0.0.0.0:3000/users/2),會顯示
開始聊天
這樣子的按鈕。 Chrome messages users 1 start chat
點擊這個 開始聊天Chrome messages rooms 1 no messages 會顯示,像上面圖像一樣子的聊天室的網頁

在這個網頁上,打入訊息 Chrome messages rooms 1 input word 點擊投稿 之後, Chrome messages rooms 1 show message 1 像這樣子會顯示

你好!

山田太郎

這樣子的畫面。
別的會員投稿的訊息會 Chrome messages rooms 1 from users 1 after users 2 post 像上面的圖像一樣,

功課完了嗎?

湘南花子

會顯示藍色的內容。

 到這裡簡單的說明了網頁上的顯示,從這裡解釋作這個網站。

在這裡做 這個4個設定。

首先從作資料庫開始做吧!


1 : 作資料庫

為了作聊天室,首先作資料庫吧。
聊天室的資料庫的裡面是怎麼樣子呢?

要作聊天室需要下面4個資料庫。

  • users資料庫

  • 為了設定「誰作訊息」的資料跟「會員在哪一個聊天室」的資料,需要用這個資料庫。

  • messages資料庫

  • 追加「作訊息的會員(user_id)」跟「有作好的訊息的聊天室(room_id)」這個兩個框子。

    messages
    id content user_id room_id created_at updated_at
    1 你好! 1 1 2016-04-12 20:33:43 2016-04-12 20:33:43
     這個資料表示,聊天室(room_id)是「1」會員(user_id)是「1」內容是「你好!」的訊息「1」。

  • rooms資料庫

  • 設定「聊天室的資料(聊天的名字跟說明)」。

    rooms
    id name explain created_at updated_at
    1 新的聊天 打入說明 2016-04-12 20:30:21 2016-04-12 20:30:21
     表示,名字(name)是「新的聊天」,說明(explain)是「打入說明」的聊天室(id)「1」

  • enties資料庫

  • 設定「那一個會員在參加哪一個聊天室的資料」的內容。

    entries
    id room_id user_id created_at updated_at
    1 1 2 2016-04-12 20:30:21 2016-04-12 20:30:21
     表示,會員(user_id)「2」在參加聊天室(room_id)「1」的資料。

用圖像解釋吧。 Chrome messages users 1 start chat 點擊上面圖像的網頁的 開始聊天 之後,

rooms
id name explain created_at updated_at
1 新的聊天 打入說明 2016-04-12 20:30:21 2016-04-12 20:30:21
 聊天室「1」

entries
id room_id user_id created_at updated_at
1 1 1 2016-04-12 20:30:21 2016-04-12 20:30:21
id room_id user_id created_at updated_at
1 1 2 2016-04-12 20:30:21 2016-04-12 20:30:21
 會員「1」跟「2」在參加聊天室「1」的資料

會新增。之後移動到聊天室的網頁。 Chrome messages rooms 1 no messages 在這個網頁上,打入訊息 Chrome messages rooms 1 input word 點擊投稿 之後,

messages
id content user_id room_id created_at updated_at
1 你好! 1 1 2016-04-12 20:33:43 2016-04-12 20:33:43
 在聊天室(room_id)「1」裡,會員(user_id)「1」投稿的「你好!」的資料

會新增。在網頁上顯示這個新增的訊息。 Chrome messages rooms 1 show message 1
在這裡編輯・新增
  • messages資料庫
  • rooms資料庫
  • entries資料庫
這個3個資料庫。那麽開始做吧!


 ① : messages資料庫


 編輯資料庫之前,首先刪除已經有保存的資料吧!

在terminal上,打入下面的命令吧

 terminal
 使用Windows的話,用「命令提示符」吧。

1 rake db:reset

 不動的話,在前面追加「bundle exec」,打入「bundle exec rake db:reset」吧。

這個命令在,重新作資料庫的資料。

那麽使用Sequel Pro / SqliteBrowser打開「messages-app_development」,看看「messages」資料庫的內容有沒有刪除。
※ 打開Sequel Pro的方法請參考這裡,打開SqliteBrowser的方法請參考這裡

 重新作好資料庫之後,在註冊的網頁「0.0.0.0:3000/users/sign_up」新增會員的資料吧。
 使用Windows的話,打開localhost:3000/users/sign_up吧。
 做好這裡之後,編輯「messages」資料庫吧!
※ 編輯資料庫的方法請參考這裡

messages
id content user_id room_id created_at updated_at
1 你好! 1 1 2016-04-12 20:33:43 2016-04-12 20:33:43

資料庫的編輯要在,用terminal作的設定文件設定。
事先,在terminal上移動到message-app吧。


 使用Windows移動的方法,請參考這裡


 terminal
1 2 3 cd Desktop cd rails_project cd message-app

在這個文件夾裡作編輯資料庫的設定文件。

terminal
 使用Windows的話,用「命令提示符」吧。
1 rails g migration changeColumnMessages

這樣在db > migrate」文件夾裡作好「日子_change_column_messages.rb了。
參考下面的內容,編輯這個日子_change_column_messages.rb的設定吧。!
※ 內容請參考這裡

 日子_change_column_messages.rb(追加第3、4行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 class ChangeColumnMessages < ActiveRecord::Migration def change add_column :messages, :room_id, :integer remove_column :messages, :receiver, :integer end end

這樣做好了
  • 追加「room_id」的框子
  • 刪除「receiver」的框子
這個兩個設定了。
完了之後,導入設定的內容。在terminal上,打入下面的命令吧。

terminal
 使用Windows的話,用「命令提示符」吧。
1 rake db:migrate

 不動的話,在前面追加「bundle exec」,打入「bundle exec rake db:migrate」吧。

這樣,設定的內容適用好了。

最後用Sequel Pro看看裡面的內容吧。
※ 打開Sequel Pro的方法請參考這裡,打開SqliteBrowser的方法請參考這裡
到這裡設定好了
  • receiver」的刪除
  • room_id」的追加
按着這個更改,編輯messages_controller.rb的內容。

編輯app > controllers > messages_controller.rb的內容吧!

 messages_controller.rb(追加第6行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 class MessagesController < ApplicationController before_action :authenticate_user!, :only => [:create] def create @message = Message.create(params.require(:message).permit(:user_id, :content, :room_id).merge(:user_id => current_user.id)) redirect_to :back end end

6 .permit(:user_id, :content, :room_id)...

這樣刪除receiver,追加room_id了。

這樣做好了messages」資料庫的操作資料的設定了。

 設定的內容,請參考這裡


 ② : rooms資料庫


 接着作「rooms」資料庫吧!

rooms
id name explain created_at updated_at
1 新的聊天 打入說明 2016-04-12 20:30:21 2016-04-12 20:30:21

作資料庫要用terminal作的設定文件上設定內容。
在terminal上打入下面的內容吧!
※ 作資料庫的解釋,請參考這裡

 terminal
1 rails g model room

編輯,在這個命令作好的db > migrate」文件夾裡的「日子_create_rooms.rb」吧。
※ 內容請參考這裡

 日子_create_rooms.rb(追加第5、6行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 class CreateRooms < ActiveRecord::Migration def change create_table :rooms do |t| t.string :name, default: "新的聊天" t.text :explain t.timestamps null: false end end end

這一次,name設定上

1 t.string :name, default: "新的聊天"

像這樣,後面有

1 , default: "文字"

的設定。

在這裡設定,新增資料的時候如果沒有資料的話要在框子裡放的資料。
設定寫着default應該可以理解。

 那麽,放「短的文章(string)」的「file」的框子的default要設定「新的文件」的話,必須要設定怎麼樣的設定呢?


1 t.string :file, default: "新的文件"

最後為了導入內容,在terminal上打入

terminal
 使用Windows的話,用「命令提示符」吧。
1 rake db:migrate

 不動的話,在前面追加「bundle exec」,打入「bundle exec rake db:migrate」吧。

這個命令吧。這樣設定會適用,作好rooms」資料庫了。

最後用Sequel Pro,看看內容吧!
※ 打開Sequel Pro的方法,參考這裡,打開SqliteBrowser的方法參考這裡

 設定的內容,請參考這裡


 ③ : entries資料庫


 最後,作作看表示哪一個會員在參加哪一個聊天室的資料的「entries」資料庫吧。

entries
id room_id user_id created_at updated_at
1 1 1 2016-04-12 20:30:21 2016-04-12 20:30:21
 這個「id」是「1」的資料在表示,會員「1」在參加聊天室「1」的資料。
剛開始作資料庫吧!在terminal上,打入下面的命令吧。

 terminal
※ 這一次的打入是單數,請注意!
1 rails g model entry

打入完了之後,在db > migrate」文件夾裡會作好「日子_create_entries.rb」文件,在這個文件裡追加內容。
※ 內容請參考這裡

 日子_create_entries.rb(追加第5、6行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 class CreateEntries < ActiveRecord::Migration def change create_table :entries do |t| t.integer :user_id t.integer :room_id t.timestamps null: false end end end

這樣,作了
entries
id room_id user_id created_at updated_at
1 1 1 2016-04-12 20:30:21 2016-04-12 20:30:21
這個資料庫的設定做好了。

接著適用這個設定吧!在terminal上,打入下面的命令吧!

terminal
 使用Windows的話,用「命令提示符」吧。
1 rake db:migrate

 不動的話,在前面追加「bundle exec」,打入「bundle exec rake ...」吧。

這樣設定適用了,資料庫作好了。

最後在Sequel Pro看看內容吧!
※ 打開Sequel Pro的方法請參考這裡,打開SqliteBrowser的方法請參考這裡

 設定的內容,請參考這裡


這樣編輯好資料庫了!用這個資料庫,作作看網頁吧。
首先 Chrome messages users 1 start chat 點擊其他的會員的網頁上的, 開始聊天 之後, Chrome messages rooms 1 no messages 會作好這樣子的聊天室的設定吧!

設定的內容請參考這裡