前期准备

会使用 create-react-app 构建react项目。
会使用express 构建 server项目。
会使用socket.io。

实施过程

1.构建react项目(client)

• 新建文件夹 Demo
• 构建react项目

create-react-app socket-01
cd socket-01
npm start 

• 安装socket.io-client

  cnpm socket.io-client --save

src中删除没有必要的文件。留下App.js 和 index.js

2.构建express(server)

• 在 Demo 文件夹中创建 express 文件夹。
• 在 express 文件夹中创建 n1.js
• 在 express 文件夹中安装项目依赖。

  cnpm i express socket.io
  基本的目录结构如下:

3.代码实施
n1.js

var http = require('http');
var io = require('socket.io');

var server = http.createServer((req,res) => {

});

server.listen(2183);

var arr = [];

io.listen(server).on('connection',(user) => {
    user.broadcast.emit('msg','有人上线了');
    // 进来一个用户，arr就有1个。就是将用户添加到arr中去
    arr.push(user);
        // 测试前台button以后能否接收到数据
        user.on('msg',(str) => {
        // broadcast 除了自己，给剩下的其他用户发送信息
        user.broadcast.emit('msg',str);
        user.emit('msg',str);
    });
    // 下线了
    user.on('disconnect',() => {
        user.broadcast.emit('msg','有人下线了')
    })  
});

App.js

import React,{Component} from 'react';
//引入sockket.io-client包 
import io from 'socket.io-client';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }
  // 建立通讯在componentDidMount生命周期函数内
  componentDidMount(){
    // 定义一个socket用于接收server传过来的url地址
      const socket = io('http://localhost:2183')
      this.refs.b.onclick = x => {
        // 当点击发送的时候将输入框中的内容传递到server端，emit为发送函数
        socket.emit('msg',this.refs.t.value)
      };
        // 接受server端传过来的信息
      socket.on('msg',(str) => {
        //console.log(str);
        var oLi = document.createElement('li');
        // 写入html页面中
        oLi.innerHTML = str;
        this.refs.ul.appendChild(oLi);
    });
  }
  render(){
    return (
      <div>
        {/* refs字符串形式 */}
        <input type="text" ref="t"/>
        <button ref="b">发送</button>
        <ul ref="ul"></ul>
      </div>
    );
  }
}
export default App;