chatroom 环境准备

总结下以前的文章,这篇是写chatroom的环境配置。对于react从0到1的过程。

先说技术实现:

后端: Node.js + socket.io 前端: React + redux + socket(client) + babel

[TOC]

环境配置

https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
http://blog.xebia.com/unlocking-es2015-features-with-webpack-and-babel/
http://zhuanlan.zhihu.com/FrontendMagazine/20522487 学习
http://wwsun.github.io/posts/react-with-es6-part-1.html?utmsource=tuicool&utmmedium=referral
https://segmentfault.com/a/1190000004506929
http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

Node.js

熟悉Node.js

目前不用管

webpack

更多需求:

Path 路径设置
server-dev 服务器设置
hot 热插拔设置

websocket:

WebSocket是HTML5开始提供的一种在单个TCP 连接上进行全双工通讯的协议。
https://www.zhihu.com/question/20215561 讨论
http://javascript.ruanyifeng.com/htmlapi/websocket.html
http://www.html5rocks.com/zh/tutorials/websockets/basics/
https://www.ibm.com/developerworks/cn/web/1112huangxawebsocket/

直接使用socket.io 作为通信中间,不做过多细节探讨。

http://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack
对于第三方库: 要全局引入,不用每个文件都单独去引用,可以用 webpack.providePlugin

对于jQuery
npm install jquery  // lowercase  
然后:
plugins:[  
new webpack.ProvidePlugin({  
            "$": "jquery",
            "jQuery": "jquery",
            "window.jQuery": "jquery",
        })
]

还有一块内容是: 分割为多个文件,不然打包成一个就太大了。

socket.io

http://socket.io/docs/

client事件:
socket.emit()
socket.on()

server:
socket.emit()
socket.on()
io.emit()

三种客户端创建链接方式区别: socket = io('http://localhost');
socket = io.connect('http://localhost:3000');
io.connect('ws://localhost:3000');

在connection事件的回调函数中,socket表示的是当前连接到服务器的那个客户端。所以代码socket.emit('foo')则只有自己收得到这个事件,而socket.broadcast.emit('foo')则表示向除自己外的所有人发送该事件,另外,上面代码中,io表示服务器整个socket连接,所以代码io.sockets.emit('foo')表示所有人都可以收到该事件。

npm

各种命令

设置npm命令
为了能每一次都非常简单的使用编译命令,你可以更新你的 package.json 文件去为Babel加一个构建命令。在 package.json 的 script 对象你可以如下添加构建命令。

"scripts": {
  "build": "babel -w code/ -d build -s"
}
现在,我们运行:
npm run build  

npm自定义命令

npm的各种命令: --save -dev 这些怎么设置,怎么直接与webpack关联。

https://coderwall.com/p/lwfndg/use-npm-start-to-launch-node-app just npm start

http://javascript.ruanyifeng.com/nodejs/npm.html

Babel

https://babeljs.io/docs/setup/#webpack 官方基本配置,完成加载 ES2015.js 、 react.jsx 两个加载器,不用使用react的jsx加载器。

https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md 文档

 npm install --save-dev babel-loader babel-core

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

loader: webpack配置

{
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }

https://github.com/babel/babel-sublime 语法高亮支持
https://segmentfault.com/a/1190000003698071 sublime配置语法高亮和检查

React

react react-dom

配置好bable的语法支持和jsx支持。

tutorial

https://facebook.github.io/react/docs/getting-started.html
http://reactjs.cn/react/docs/tutorial.html

http://wwsun.github.io/posts/react-with-es6-part-2.html 几个小应用

理解React

http://www.ibm.com/developerworks/cn/web/1509dongyuereact/

JSX 语法

这里是坑

用ES2015写react,其中有几个坑是必须注意的:

Cannot read property 'xxx of null
http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html 类方法绑定
http://wwsun.github.io/posts/react-with-es6-part-3.html 翻译
http://ju.outofmemory.cn/entry/197970 ES6问题
http://www.tamas.io/react-with-es6/ 官方例子的ES6版本
https://babeljs.io/blog/2015/06/07/react-on-es6-plus babel 的ES5 和ES2015 写法区分

http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8 ES5 ES6 跳坑

http://imweb.io/topic/561f9352883ae3ed25e400f5 简单的ES6规范问题

redux

https://camsong.github.io/redux-in-chinese/docs/introduction/Ecosystem.html
https://github.com/reactjs/react-redux

注意了注意了

实例

http://www.cnblogs.com/Wayou/p/hichatbuiltwithnodejssocket.html

express

通过express的中间件实现访问静态文件:http://expressjs.com/zh-cn/starter/static-files.html

http://stackoverflow.com/questions/24377654/what-is-the-difference-between-express-3-4-and-express-framework socket.io 中的东西。

我要关心的静态服务器的建立: 几种方法与区别。

文档和书籍,汇智网的实践型的教程。

实现发送POST请求,完成对图灵机器人的连接。 posthttps://segmentfault.com/a/1190000000385867
https://nodejs.org/api/http.html#httphttprequestoptionscallback
https://www.mgenware.com/blog/?p=2707

其他

  • 对于jQuery: $('#showmsg')[0].scrollHeight 只有这样才能获得滚动条的高度,其他方法不行。
  • 使用for/in 循环对象: 必须使用中括号操作符
for (var listR in msg) {  
        console.log(msg[listR])
        all = all + ' ' + msg[listR]
    }

TODO

LIST:

对新登陆的用户提供一条友好的信息,利用一些对外开放的接口。实现查询功能,比如天气、时间。或者提供知乎里的句子,一些笑话等。图灵机器人,但是需要react文本格式支持:

session和cookie 完成

jQuery简化操作\

实现注册,对用户名做限制

手机实测, 还有很多问题。在布局上。