Wildchat 是使用 Wilddog 一个开源的、实时的聊天应用。它提供完全多用户,多房间,用户搜索,站内短信,聊天邀请等等。
访问 wildchat.wilddogapp.com 查看 Wildchat 在线示例.
首先确认本机已经安装 Node.js 运行环境,然后执行下列指令:
git clone git@github.com:WildDogTeam/demo-js-wildchat.git
cd demo-js-wildchat
安装依赖:
npm install bower -g
npm install
bower install
编译项目:
grunt
生成结果:
dist/
├── wildchat.css
├── wildchat.js
├── wildchat.min.css
└── wildchat.min.js
本地文档是用jekyll构建的,jekyll需要ruby环境的运行环境。如果没有ruby环境,可以查看上面的在线文档。
cd website/
jekyll s
如果遇到
Dependency Error: Yikes! It looks like you don't have pygments or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- pygments' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/!
Liquid Exception: pygments in docs/index.md
ERROR: YOUR SITE COULD NOT BE BUILT:
------------------------------------
pygments
请执行
gem install pygments.rb --source http://rubygems.org
生成web部署文件:
jekyll build
生成结果:
_site/
├── css
│ ├── pygments-borland.css
│ └── styles.css
├── docs
...
12 directories, 32 file
Wildchat 工作原理简单,前提是在你的应用程序正确的依赖它,并配置 Wilddog 帐户系统。 为了在你的项目使用 Wildchat, 需要包括 HTML 在内的以下文件:
<!-- jQuery -->
<script src='http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'></script>
<!-- Wilddog -->
<script src='https://cdn.wilddog.com/js/client/current/wilddog.js'></script>
<!-- Wildchat -->
<link rel='stylesheet' href='https://cdn.wilddog.com/app/wildchat/0.6.0/wildchat.min.css' />
<script src='https://cdn.wilddog.com/app/wildchat/0.6.0/wildchat.min.js'></script>
使用上面提到的URL可以从Wilddog的CDN上下载到Wildchat的精简版和非精简版。你也可以从Wilddog的Github中下载他们。当然啦,Wilddog可以在官网上下载。
你也可以通过npm 或者 bowr安装Wildchat, 他们会自动下载依赖。
$ npm install wildchat --save
$ bower install wildchat --save
- 添加用户登录
<script>
// Create a new Wilddog reference, and a new instance of the Login client
var config = {
authDomain: "<appId>.wilddog.com",
syncURL: "https://<appId>.wilddogio.com",
};
wilddog.initializeApp(config);
var chatRef = wilddog.sync();
var auth = wilddog.auth();
var weiboProvider = new wilddog.auth.WeiboAuthProvider();
function login() {
wilddog.auth().signInWithPopup(weiboProvider).then(function (user) {
// 一旦通过验证,Wildchat实例携带我们的用户ID和用户名
initChat(user);
}).catch(function (error) {
console.log(error);
});
}
</script>
<button onclick='login();'>登录微博</button>
- 初始化一个聊天。
<script>
function initChat(authData) {
var chat = new WildchatUI(chatRef, document.getElementById('wildchat-wrapper'));
chat.setUser(authData.uid, authData.displayName);
}
</script>
<div id='wildchat-wrapper'></div>
Wildchat 需要 Wilddog 来同步和存储数据。您可以在这里注册一个免费帐户。
这里分类汇总了 WildDog平台上的示例程序和开源应用, 链接地址:https://github.com/WildDogTeam/wilddog-demos
如果在使用过程中有任何问题,请提 issue ,我会在 Github 上给予帮助。
- demo-ios-wildchat Wildchat iOS 版本
- Wilddog 概览
- JavaScript SDK快速入门
- JavaScript SDK API
- 下载页面
- Wilddog FAQ
- jekyll 中文 开源软件,功能是将纯文本转化为静态网站和博客
- jekyll 中文安装文档
MIT http://wilddog.mit-license.org/
demo-js-wildchat is built on and with the aid of several projects. We would like to thank the following projects for helping us achieve our goals:
Open Source: