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 像上面的图像一样,

功课完了吗?

湘南花子

会显示蓝色的內容。

 到这里简单的说明了网页上的显示,从这里解释作这个网站。

在这里做 这个四个设定。

首先从作资料库开始做吧!


1 : 作资料库

为了作聊天室,首先作资料库吧。
聊天室的资料库的里面是怎么样子呢?

要作聊天室需要下面四个资料库。

  • 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资料库
这个三个资料库。那么开始做吧!


 ① : 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 会作好这样子的聊天室的设定吧!

设定的內容请参考这里