1945人阅读
前端（21）
最近工作比较闲，所以学了点React和Redux相关的东西，然后又做了个简单的在线聊天室练手， 现在就记录下如何用React和Redux来构建一个简单的在线聊天室。
项目在线演示地址：&&(heroku可以用来免费部署一些自己的小项目玩，还是不错的。 缺点是国内的网访问有点慢。)
源码地址： &（之后有时间也会陆续加点新功能、完善原有代码）
一、技术栈
1.前端展示层：
2.前端数据流管理：
3.前端样式：
5.前后端通信：
6.JS语法： ES6， 用编译
7.包管理：
8.项目打包：
二、项目结构
（因为考虑到后端实现可以很方便切换成别的语言实现，所以并没有把前后端做成一个。）
目录结构： &
client目录下分src和build两个文件夹。
build文件夹是项目打包后生成的。
src下面分html、js、less三个文件夹， html存放页面最原始的html，less存放样式文件，js目录下则是主要的前端逻辑。
actions目录下存放Redux框架中action的部分components目录下存放用React写的各个组件constants目录下存放项目里的一些常量containers目录下存放对React组件的封装，这种封装是React和Redux链接的桥梁pages目录下存放webpack打包的entriesreducers目录下存放Redux框架中reducer的部分routes目录下存放React框架中路由管理的部分
server目录下放的是后台逻辑
特别简单，就一个server.js，用来接收用户请求，并返回响应。
package.json和webpack配置文件是NPM+Webpack组合的配置文件，负责包管理、打包。 （）
1.向服务器发送请求
后台server.js很简单：
* Created by hshen on 9/23/16.
// Import modules
var express = require('express');
var path = require('path');
var ejs = require('ejs');
// Create server
var app = express()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
var port = process.env.PORT || 3000;
server.listen(port);
// Return index.html for '/'
app.get('/', function (req, res) {
res.render('index');
// Set path for views and static resources
app.set('views', './client/src/html');
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
app.use('/static', express.static('./client/build'));
var userNumber = 0;
io.sockets.on('connection', function (socket) {
var signedIn =
socket.on('newMessage', function (text) {
io.sockets.emit('newMessage',{
userName: socket.userName,
text: text
socket.on('signIn', function (userName) {
if (signedIn)
// we store the username in the socket session for this client
socket.userName = userN
signedIn =
io.sockets.emit('userJoined', {
userName: userName,
userNumber: userNumber
socket.on('disconnect', function () {
if (signedIn) {
io.sockets.emit('userLeft', {
userName: socket.userName,
userNumber: userNumber
对相应的请求路径返回相应的内容： &对'/'默认路径返回index.html, 同时定义static路径（static路径在html中用到）对应源代码中的哪个文件夹。
利用socket.io库，监听websocket连接，对连接发出的事件进行响应，广播给别的连接知晓。
&!--client/src/html/index.html--&
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Chatting Room&/title&
&div class=&main&&&/div&
&script type=&text/javascript& src=&static/js/common.js&&&/script&
&script type=&text/javascript& src=&static/js/index.js&&&/script&
&/html&用户在访问‘/’路径后，拿到的是如上的html，这里将会再去服务器请求打包后的index.js和common.js。
index.js和common.js是webpack根据配置打包一系列js而成的，这时候浏览器会再发请求去获取。（这样的确影响前端性能，因此我觉得更好的做法是服务器端渲染第一步，之后都在客户端进行路由跳转、渲染。）
2.客户端渲染
这部分内容也就是主要的React+Redux这部分了。
1）利用Provider来使React连接Redux的store
// js/pages/index.js , 项目入口文件
* Created by hshen on 9/20/16.
import $ from &jquery&
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from 'js/reducers'
import Routes from 'js/routes'
let store = createStore(reducer)
import 'css/main.less'
&Provider store={store}&
&/Provider&,
$('.main')[0]
2）用react-router来做路由
* Created by hshen on 9/24/16.
import React from 'react'
import ChatContainer from 'js/containers/ChatContainer';
import SignInContainer from 'js/containers/SignInContainer';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
const Routes = (
&Router history={browserHistory}&
&Route path=&/& component={SignInContainer} /&
&Route path=&/chat& component={ChatContainer}&&/Route&
export default R
3）在Container中利用connect方法获取Redux的state和actions
* Created by hshen on 9/24/16.
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import Chat from 'js/components/chat/Chat';
import * as actions from 'js/actions/actions';
class ChatContainer extends Component {
render() {
&Chat {...this.props} /&
const mapStateToProps = (state, ownProps) =& {
messages: state.messages,
const mapDispatchToProps = (dispatch, ownProps) =& {
return bindActionCreators({
receiveMessage: actions.receiveMessage,
sendMessage: actions.sendMessage,
userJoined: actions.userJoined,
userLeft: actions.userLeft
},dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(ChatContainer)
4）在Component中对数据进行渲染
* Created by hshen on 9/24/16.
import React, { Component, PropTypes } from 'react';
import MessageInput from 'js/components/chat/MessageInput';
import MessageItem from 'js/components/chat/MessageItem';
import Singleton from 'js/socket'
import 'css/chat.less'
export default class Chat extends Component {
constructor(props, context) {
super(props, context);
this.socket = Singleton.getInstance();
componentWillMount() {
const { receiveMessage, userJoined, userLeft } = this.
this.socket.on('newMessage',function (msg) {
receiveMessage(msg);
this.socket.on('userJoined',function (data) {
console.log(data);
userJoined(data);
this.socket.on('userLeft',function (data) {
console.log(data);
userLeft(data);
sendMessage(newMessage) {
const { sendMessage, userName } = this.
if (newMessage.length !== 0) {
sendMessage(newMessage);
this.socket.emit('newMessage', newMessage);
render() {
const { messages} = this.
&div className=&chat&&
&div className=&chat-area&&
&ul className=&messages&&
{messages.map( (message, index) =&
&MessageItem message={message} key={index}/&
&MessageInput sendMessage={this.sendMessage.bind(this)} /&
就这样，一个在线聊天室就完成了。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：169858次
积分：2903
积分：2903
排名：第10593名
原创：102篇
转载：21篇
评论：105条
2016年本科毕业于南京大学
现工作于Splunk
阅读：20719
(14)(1)(7)(4)(2)(1)(3)(3)(2)(5)(8)(14)(2)(3)(1)(5)(1)(8)(9)(12)(26)一个基于 SocketIO 的 WEB 即时通讯聊天室 · Ruby China
周末看了下WebSocket相关的一些介绍，昨天花了一天的时间写了个基于SocketIO的WEB聊天室，前端Bootstrap后端Nginx和Node，界面预览：
能够实现输入状态显示：
不算什么项目，只可以说是一个DEMO，如果想研究SocketIO的可以拿这个做个参考:-)，代码地址：
贴个在线demo的地址？
没，我没有线上的环境
用openshift可以部署。
(VPN登录) 看我的线上demo
代码再， 也用到的socket.io，欢迎fork
好牛 能时时统计在线人数么
注册了OpenShift的账号，但是创建WEB应用时设置应用的URL系统一直提示The supplied application name 'socketiochatroomdemo2014' already exists.试了N个URL了。。。
我没遇到过这个问题奥，再settings页面，你需要先设置domains，然后在设置appname，这样就应该不会冲突了。
另外，对如如何使用openshift，可以看看这本官方的使用指南
用grunt脚本来部署就是了，非常方便。所有部署相关的task用grunt管理，什么build,deploy这些。我曾经修改过一个deploy的脚本 ，现在都是一键部署到多个服务器。刚开始接触socket.io的时候也和你一样写过一个demo，
我比较新手，部署了一下。启动后浏览器访问不能，但是netstat 了一下，都是established
需要两个服务，一个是HTTPServer用来存放静态前端代码，一个是执行命令$ node app.js来开启服务端的Socket服务
多谢，搞了个nginx搞定了
我想问下，作为一个小 demo，跑起来还要启动 httpserver 不是很蛋疼吗。用下 express.static 嘛
后方可回复, 如果你还没有账号请点击这里 。
共收到 12 条回复新课强力来袭：基于Node.js的web实时聊天室项目！
&&&&麦子学院新课以马踏飞燕般的速度生粗来啦(*^__^*) 。小伙伴们你萌确定不来一发吗？
啦啦啦――上图镇楼↓↓↓
那些神奇的传送门→_→
本课程：/course/others/597-8698/
李大大主页：/group/common/course/59404/
这里是正儿八经的课程介绍（快看快看o(￣ヘ￣o#)）：
&&&&网站实时通讯一体化解决方案，采用websocket协议（基于TCP）实现，告别传统的
long poll 和
方式，极大减轻服务器的资源消耗。系统采用非阻塞方式，实现多组用户之间的消息传递，将http协议的被动性转换为服务端的主动性。同时，Websocket通过建立持久连接，解决了消息处理速度过慢的问题。
爱你们的#李阳#大大：
&&&多年web系统开发及大数据开发经验，先后在诺亚舟教育电子有限公司、新蛋科技任开发工程师，后加入创业团队从事电子商务平台开发工作。
快到我碗里来，这里有萌萌哒的老师等你调戏哟&(￣ˇ￣)/
你尚未登录或可能已退出账号:(请先或者从零开始用node.js搭建web聊天室
从零开始用node.js搭建web聊天室
此处选用的系统是CentOS 5.4 x86_64
一、&&&&&安装node.js
1、下载node.js源码包
地址 & 这里有最新版本的node.js对应各个操作系统的二进制文件或者源码包，请自行选择，此处我们选源码编译安装，所以下载源码包。
现在最新版已经是v0.10.3了。
取得tar包的url，敲命令
图表1复制链接地址
wget & http://nodejs.org/dist/v0.10.3/node-v0.10.3.tar.gz
在linux中用wget下载
2、编译安装
tar –zxvf node-v0.10.3.tar.gz
·编译安装
./configure &--prefix=/usr/local/node &&#prefix参数指定要安装到的路径，如果这个命令执行失败，最常见的原因是，当前python版本太低。此处最初也碰到了这个问题，把python2.4升级到python2.7后解决这个问题。
make #这个命令要花些时间，此时可以去沏杯茶喝
make install
此时运行命令 node –v ，若显示如下：
则表示安装node.js成功。
二、&&&&&安装基于node.js的web聊天室demo
下载源码包
在CSDN上，
感谢 @同学
下载完成后，解压
unzip chat.zip
注意看你的系统是否安装有unzip这个命令。
cd chat/chat/
node chat.js
这时你就能看到如下界面了
在浏览器地址栏中，如果你是安装在本地机器上，则输入;如果是在内部网服务器上，则输入相应服务器IP，,就能看到聊天室登陆界面啦！
当有客户端发起连接时，后台会有调试日志输出
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？}