[Rails应用实战]WebChat的敏捷开发
即时通讯的应用如微信WeChat大家一定很熟悉,那么今天就来详解一下如何用Rails快速开发一款网页版微信(网页版聊天室)
所有代码在Github中,目前已有功能:
- 即时通讯
- 增添好友
- 创建聊天
- 拉人,删人
- 转移房屋权限
Todo
- UI界面修改(类似WeChat)
- 未读信息的提醒(包括声音)
- 加入更多的ajax提高用户体验
代码实现
我们主要应用了Render_sync库来提供服务器监听并实时推送信息的功能,下面的实现贴出一些主要的部分,详细的请到Github中下载代码查看:
首先加入render_sync等库,编辑Gemfile文件,加入以下
gem 'faye' gem 'thin', require: false gem 'render_sync'
创建User,Message,Chat,FriendShip四个模型,之间的关系分别为:
class Chat < ActiveRecord::Basehas_and_belongs_to_many :usershas_many :messages, :dependent => :destroy end
class Friendship < ActiveRecord::Basebelongs_to :userbelongs_to :friend, :class_name => "User" end
class Message < ActiveRecord::Basebelongs_to :userbelongs_to :chatsync :allsync_scope :by_chat, ->(chat) { where(chat_id: chat.id) } end
class User < ActiveRecord::Basehas_many :messageshas_and_belongs_to_many :chatshas_many :friendshipshas_many :friends, :through => :friendshipshas_many :inverse_friendships, :class_name => "Friendship", :foreign_key => "friend_id"has_many :inverse_friends, :through => :inverse_friendships, :source => :user.....end
编写各个模型的migrate文件,这里不贴出来,详细请看这里,创建seed.rb文件,写入初始数据:
(1..100).each do |index|User.create(name: Faker::Name.name,email: "user#{index}@test.com",password: 'password',role: Faker::Number.between(1, 4),sex: ['male', 'female'].sample,phonenumber: Faker::PhoneNumber.phone_number,status: Faker::Company.profession) endUser.first.friendships.create(:friend_id => 2) User.first.friendships.create(:friend_id => 3)
编写ChatsController,FriendshipsController, MessagesController, SessionsController以及UsersController,如这里所示,以及各个控制器下的试图,如这里所示
这里主要讲解Render_sync库的用法,在ChatsController的show方法的视图中,这两句起到了推送实时信息的功能:
<%= sync partial: 'message_row', collection: Message.by_chat(@chat), refetch: true %><%= sync_new partial: 'message_row', resource: Message.new, scope: @chat, refetch: true %>
refetch: true
选项能决定推送的方式为ajaxscope: @chat
能决定推送消息的范围,例如只给当前聊天室页面的client实时推送新的消息collection: Message.by_chat(@chat)
能决定历史信息为当前聊天室的信息,而不是所有的所有的信息都在当前聊天室显示
局部视图文件需要位于
app/views/sync/messages/refetch/_message_row.html.erb
才能生效,这个局部视图负责就是每条消息的显示,例如消息的主题,发送人和发送时间,简化后为:<p> <%= message.user.name %> <%= message.created_at.to_formatted_s(:db) %> <%= message.body %> </p>
最重要的为MessagesController的create方法,这个方法接受两个参数,一个是发送的message,一个是聊天室的id,创建发送的message后,将此message与当前聊天室关联,然后调用sync_new方法同步推送此message,推送的范围为此聊天室,最后重定向至此聊天室
class MessagesController < ApplicationController...def create@message = current_user.messages.build(message_params)chat=Chat.find_by_id(params[:chat_room])@message.chat=chatif @message.savesync_new @message, scope: chatendredirect_to chat_path(chat)end....end
最后编辑聊天室中的发送框即可,在ChatsController的show方法视图下,加入:
<%= form_for @new_message, remote: true do |f| %><div class="input-group"><%= f.text_field :body, class: "form-control input-sm", placeholder: "Type your message here..." %><span class="input-group-btn"> <%= f.submit "发送", class: "btn btn-warning btn-sm" %> </span><%= hidden_field_tag :chat_room, @chat.id %></div> <% end %>
- 使用hidden_field_tag传入此聊天室的id
remote: true
使表单用ajax方法提交
完成其他模块,运行服务器
结果截屏
如何使用
Fork项目,https://github.com/PENGZhaoqing/RailsChat
git clone https://github.com/your_user_name/RailsChat cd RailsChat bundle install rails server
然后再打开另外一个终端,运行以下命令启动另外一个server来监听聊天室的用户并实时推送最新的消息:
rackup sync.ru -E production
Note:如果要部署到云上或者本地局域网内,需要修改config/sync.yml
文件
以本地局域网为例:
若本机的ip地址为192.168.0.14(使用
ifconfig
查看),那么需要将config/sync.yml中的localhost全改为此ip地址,例如development: server: "http://192.168.0.14:9292/faye" adapter_javascript_url: "http://192.168.0.14:9292/faye/faye.js" auth_token: "97c42058e1466902d5adfac0f83e84c1794b9c3390e3b0824be9db8344eae82b" adapter: "Faye" async: truetest: ... production: ...
然后运行rake tmp:clear来清除缓存,不然修改不会生效(运行前先将所有相关的运行停止:如rails s,rackup sync.ru等)
再次运行rails服务器和监听程序,并指定监听程序运行的ip地址
rails s rackup sync.ru -E production --host 192.168.0.14
Debug
当遇到消息并没有实时推送的情况时,先F12查看浏览器的Js文件加载情况,若faye.js加载成功则一般不会出现问题
以上加载完成但是仍然没有推送的时候,请查看Rails服务器的log文件
需要在两个浏览器中登录不同的账号来检验聊天室功能
[Rails应用实战]WebChat的敏捷开发相关推荐
- 敏捷项目管理实战第一天 敏捷开发SCURM的前世今生
开篇词 敏捷是互联网时代的超级管理术 你好,我是莫敏.自 2006 年开始接触敏捷,到 2010 年参与组织每年一届的敏捷大会,再到 2012 年加入腾讯先后从事项目管理和产品管理工作,可以说从过去到 ...
- 线下活动【西安站】用Leangoo做Scrum敏捷开发实战课(免费)
Leangoo诚邀您参加 2017<用leangoo做Scrum敏捷开发>实战课!在此实战课上,您不仅可以听到一线资深敏捷顾问带来的敏捷落地实践经验,还可以和众多企业同仁共同探讨敏捷实践过 ...
- 线下活动【深圳】用Leangoo做Scrum敏捷开发实战课(免费)
课程安排: 时间:2017年8月12日 14:00 – 17:30 (13:30签到) 地点: 中南海滨大酒店十一楼海涛厅,南山区南新路3125号. 人数限制:100人 本次活动免费 课程概述: ...
- Leangoo大讲堂:免费Scrum敏捷开发实战—武汉站
活动信息: 授课时间:2016年5月21日 下午 14:00 – 17:30 (13:30签到) 授课地点:武汉市洪山区民族大道一号光谷资本大厦二楼培训中心 人数限制:150人(企业报名每家限制3人以 ...
- leangoo大讲堂:scrum敏捷开发实战——深圳站
授课时间:2016年4月23日 下午 14:00 – 17:30 (13:30签到) 授课地点:深圳软件园,南山区科技中二路深圳软件园二期14号楼三楼大厅 人数限制:150人,企业报名的每家限制为3人 ...
- BDD敏捷开发入门与实战
BDD敏捷开发入门与实战 1.BDD的来由 2003年,Dan North首先提出了BDD的概念,并在随后开发出了JBehave框架.在Dan North博客上介绍BDD的文章中,说到了BDD的想法是 ...
- 极客学院腾讯 TAPD·极客开放日 [敏捷开发畅想与实战]
极客学院&腾讯 TAPD -极客开放日活动,本次主题「敏捷开发畅想与实战」. 多位行业大佬亲临:嘉宾包括中国 IT 界著名意见领袖.敏捷开发布道师熊节先生,源自硅谷.扎根香港的行业独角兽 Af ...
- 有道云笔记蒋炜航:敏捷开发的实战经验
网易有道笔记负责人谈敏捷开发的实战经验:什么时候适合使用"敏捷开发"呢?我们的经验是需要两点:一.团队有三名或以上的研发工程师:二.团队内有一名合适的Scrum Master. 作 ...
- 蒋炜航:敏捷开发的实战经验
什么时候算时机成熟呢?我们的经验是需要两点:一.团队有三名或以上的研发工程师:二.团队内有一名合适的Scrum Master. AD:WOT2015 互联网运维与开发者大会 热销抢票 网易有道笔记负责 ...
最新文章
- Tensorflow—变量
- UVA1629 Cake slicing
- MySQL中in(常量列表)的执行计划
- 《***测试实践指南》D03
- 中小企业虚拟化解决方案-VMware vSphere 6.5-日常管理入口v0.0.1
- shell中的常用通配符,字符类
- WPF Multi-Touch 开发:Windows 7 安装多点触屏模拟器
- 从搭建大数据环境说起,到执行WordCount所遇到的坑
- 二维数组作数据源填充到repeater
- linux百分比查看文件,Linux 如何查看内存使用率百分比?
- 17ー03ー20 日本語勉強
- 解放生产力「GitHub 热点速览 v.21.51」
- 给工具箱中的控件添加图标
- android支持u盘格式文件,安卓系统OTG支持U盘格式
- 解决问题:Unable to connect to Redis
- sql注入 mysql 猜数据库名字_sql注入 - osc_dfi5j6xi的个人空间 - OSCHINA - 中文开源技术交流社区...
- SIGMOD 2021 | 时间序列相关论文一览(附原文源码)
- linux、linux虚拟机相关
- 计算机系统组成及工作原理PPT,第二章 计算机基础知识 2.1 计算机系统的组成与工作原理 2.2 数制转换及运算 2.3 数据在计算机中的表示....
- vimeo 镜像_Vimeo API – OAuth和上传示例
热门文章
- 【知识学习】简易OI/ACM竞赛测试环境lemon使用方法
- python强势来袭-35-邮件那点事儿~发送邮件
- python ug_一个python的UG二次开发简单例子(二)
- BootStrap-CSS样式_排版_页面主体(段落中字体和页边距设置)
- 跨平台工程移植:opencv_pnp + artoolkitplus :ubuntu qtcreator-- windows qtcreator/ VS
- 安装Discuz开源论坛
- 45个!最新,最赞,最多样的4G/5G基站落地图集!
- java 1.8 x64_JRE1.8 64位下载_JRE 8u202 windows x64下载 1.8.0-202 x64_当载软件站
- love2d 苹果运行
- HTML——页面视频获取与渲染