27 react中使用socket.io

一、安装

cnpm install socket.io-client --save

二、引入

src/model/socket.js

import io from 'socket.io-client';

const socket = io('http://a.itying.com?roomid=a001');

export default socket;

三、客户端接收服务端的消息

import React from 'react';

import "../assets/css/home.less";


//引入配置文件
import Config from "../model/config.js";

import storage from '../model/storage.js';

import axios from 'axios';

import {Link } from "react-router-dom";

import NavFooter from "./public/NavFooter.js";


import socket from "../model/socket.js";


class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
          api: Config.api,
          list:[],
          cartNum:0,
          leftCateStyle:{},
          bgStyle:{},
          flag:false
         };
 
    }


    componentDidMount(){
      this.requestData();
      this.getCartCount();


      socket.on('addcart', () => {
        this.getCartCount();
      });

    }

    requestData = () => {
      var api = this.state.api +"api/productlist";

      axios.get(api)
      .then( (response) => {
      
        this.setState({
          list: response.data.result
        });
      })
      .catch( (error) => {
        console.log(error);
      });
    }

 

    getCartCount = () => {
      //uid:桌号，是扫描二维码获取url得到的。购物车数据和桌子关联在一起
      
      var uid = storage.get("roomid");
      var api = this.state.api+ "api/cartCount?uid="+uid;
      // var api = this.state.api + "api/cartCount?uid=a200";

      axios.get(api)
      .then( (response) => {
      //  console.log(response)
        if (response.data.success) {
          this.setState({
            cartNum : response.data.result
          })
        }
      })
      .catch( (error) => {
        console.log(error);
      });


      
    }

    asideDomInit = () => {

      if (this.state.flag) {

          this.setState({
            leftCateStyle : { "transform" :"translate(0,0)" } ,
            bgStyle  : {"display":"block"},
            flag:false
          });

          document.body.style.overflow = "hidden";
      } else {

          this.setState({
            leftCateStyle : { "transform" :"translate(-100%,0)" },
            bgStyle : {"display":"none"},
            flag:true
          });

          document.body.style.overflow = "auto";
      }

    }


    changeList = (key) => {

      //获取右侧分类距离顶部的高度
      var itemCateIndex = "item_cate_" + key;
 
      //获取右侧分类距离顶部的高度
      var itemCatesDom = document.getElementsByClassName(itemCateIndex);
      document.documentElement.scrollTop = itemCatesDom[0].offsetTop;

     
      document.body.style.overflow = "auto";

      this.setState({
        leftCateStyle : { "transform" :"translate(-100%,0)" },
        bgStyle : {"display":"none"},
      });

    }


    render() {
        return (
            <div className="homebox">
                <header className="index_header">
                  <div className="hlist">
                    <Link to="/hot">
                    <img src={require("../assets/images/rexiao.png")} alt="" />
                    <p>热销榜</p>
                    </Link>
                  </div>
                  <div className="hlist">
                    <img src={require("../assets/images/caidan.png")} alt="" />
                    <p>点过的菜</p>
                  </div>
                  <div className="hlist">
                  <Link to="/search">
                    <img src={require("../assets/images/sousuo.png")} alt="" />
                    <p>搜你喜欢</p>
                    </Link>
                  </div>
                </header>

                <aside className="left_cate" style={this.state.leftCateStyle}>
                  <ul>  
                    {
                      this.state.list.map((item,index) => {
                        return (
                          <li  key={index} 
                         
                          onClick={this.changeList.bind(this,index)}>{item.title }</li>
                        )
                      })
                    }
                  </ul>
                  <div  className="nav_cate"  id="nav_cate" onClick={this.asideDomInit}>
                    <img src={require("../assets/images/nav.png")} alt="" />
                    <p>菜单</p>
                  </div>
                </aside>

                <div className="content">
                   {
                     this.state.list.map((item,index)=>{
                        return (
                          <div className="item"  key={index}>
                          <h3 className={`item_cate  item_cate_${index}`}>{ item.title }</h3>
                          <ul className="item_list">
                            {
                              item.list.map((food, index2)=>{
                                return (
                                  <li  key={index2}>
                                  <div className="inner">
                                    <Link to={`/pcontent/${food._id}`}>
                                      {food.img_url ?  <img src={`${this.state.api}${food.img_url}`} alt =""/> : ""}
                                      <p className="title">{ food.title }</p>
                                      <p className="price">¥{ food.price }</p>
                                    </Link>
                                  </div>
                                </li>
                                )
                              })
                            }
                          </ul>
                        </div>
                        )
                     })
                   }
                </div>

                <div className="bg" style={this.state.bgStyle}  onClick={this.asideDomInit}></div>

                <NavFooter />

                <div id="footer_cart" className="footer_cart">
                  <Link to="/cart">
                    <img src={require("../assets/images/cart.png")} alt="" />
                    <p>购物车</p>
                  </Link>

                  {
                    this.state.cartNum &&  <span className="num" >{ this.state.cartNum }</span> 
                  }
                </div> 
              
            </div>
        );
    }
}

export default Home;

四、客户端向服务端发送消息

import React from "react";

import "../assets/css/cart.less";

//引入配置文件
import Config from "../model/config.js";

import storage from "../model/storage.js";

import axios from "axios";

import { Link, withRouter } from "react-router-dom";

import NavFooter from "./public/NavFooter.js";

import socket from "../model/socket.js";

class Cart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      api: Config.api,
      list: [],
      allPrice: 0,
      totalNum: 0,
      peopleList: {},
    };
  }

  componentDidMount() {
    this.getCartData();
    this.getPeopleInfoList();
    socket.on('addcart', () => {
      this.getCartCount();
    });
  }

  //获得购物车数据
  getCartData = () => {
    //uid:桌号，是扫描二维码获取url得到的。购物车数据和桌子关联在一起
    //桌号先写死
    var uid = storage.get("roomid");
    var api = this.state.api + "api/cartlist?uid=" + uid;

    // var api = this.state.api + "api/cartlist?uid=a200";

    axios
      .get(api)
      .then((response) => {
        this.setState({
          list: response.data.result,
        });
        this.getTotalResult();
      })
      .catch((error) => {
        console.log(error);
      });
  };

  //获取总数量 以及总价格
  getTotalResult() {
    var appPrice = 0;
    var totalNum = 0;
    var list = this.state.list;
    for (var i = 0; i < list.length; i++) {
      appPrice += parseFloat(list[i].price * list[i].num);
      totalNum += list[i].num;
    }

    this.setState({
      allPrice: appPrice,
      totalNum: totalNum,
    });
  }

  //获取用餐人的信息
  getPeopleInfoList() {
    var uid = storage.get("roomid");
    var api = this.state.api + "api/peopleInfoList?uid=" + uid;

    // var api = this.state.api + "api/peopleInfoList?uid=a200";

    axios
      .get(api)
      .then((response) => {
        // console.log(response.data.result[0]);
        this.setState({
          peopleList: response.data.result[0],
        });
      })
      .catch((error) => {
        console.log(error);
      });
  }

  //数量--
  decCount = (item, key) => {
    //********************* */
    var product_id = item.product_id;
    var num = item.num;

    var uid = storage.get("roomid");
    // var uid = "a002";
    var api =
      this.state.api +
      "api/decCart?uid=" +
      uid +
      "&product_id=" +
      product_id +
      "&num=" +
      num;

    axios
      .get(api)
      .then((response) => {
        //修改购物车数据的时候，给服务器发消息
        socket.emit('addcart','addcart');
        this.getTotalResult();
        //  console.log(response)
      })
      .catch((error) => {
        console.log(error);
      });

    var tempList = this.state.list;

    if (item.num == 1) {
      //删除购物车的这条数据
      tempList.splice(key, 1);
    } else {
      tempList[key].num = tempList[key].num - 1;
    }

    this.setState({
      list: tempList,
    });
  };

  //数量 ++
  incCount = (item, key) => {
    // ++item.num;

    var tempList = this.state.list;
    tempList[key].num = tempList[key].num + 1;

    this.setState({
      list: tempList,
    });

    ///incCart?uid=a001&product_id=1241241255436246&num=2
    //请求远程服务器执行更新操作

    //uid:桌号，是扫描二维码获取url得到的
    var product_id = item.product_id;

    var num = this.state.list[key].num;

    var uid = storage.get("roomid");
    // var uid = "a002";

    var api =
      this.state.api +
      "api/incCart?uid=" +
      uid +
      "&product_id=" +
      product_id +
      "&num=" +
      num;

    axios
      .get(api)
      .then((response) => {
        //修改购物车数据的时候，给服务器发消息
        socket.emit('addcart','addcart');
        this.getTotalResult();
      })
      .catch((error) => {
        console.log(error);
      });
  };

  //提交订单
  addOrder = () => {
    var uid = storage.get("roomid");
    // var uid = "a002";
    var p_num = this.state.peopleList.p_num;
    var p_mark = this.state.peopleList.p_mark;
    var total_price = this.state.allPrice;
    var total_num = this.state.totalNum;
    var order = JSON.stringify(this.state.list); //数组 把json对象转为json字符串

    var api = this.state.api + "api/addOrder";

    axios
      .post(api, {
        uid,
        p_num,
        p_mark,
        total_price,
        total_num,
        order,
      })
      .then((response) => {
        // console.log("response", response);
        if (response.data.success) {
          this.props.history.push("/order");
        } else {
          alert("提交数据有误!");
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    return (
      <div className="cartbox">
        <div className="cart_content">
          <div className="cart_info">
            <h2>购物车</h2>
            <div className="p_number">
              <div className="p_number_left">
                <p>用餐人数:{this.state.peopleList.p_num}</p>
                <p>
                  备注:
                  {this.state.peopleList.p_mark && (
                    <span>{this.state.peopleList.p_mark}</span>
                  )}
                  {!this.state.peopleList.p_mark && <span>无</span>}
                </p>
              </div>
              <div className="p_number_right">
                <Link to="/editPeopleInfo">
                  <img src={require("../assets/images/edit.png")} alt="" />
                  <p>修改</p>
                </Link>
              </div>
            </div>
            <div className="cart_p_num">
              <p>购物车中总共有{this.state.totalNum}个菜</p>
              <p>
                合计:
                <span className="price">¥{this.state.allPrice}</span>
              </p>
            </div>
          </div>

          {this.state.totalNum != 0 && (
            <div className="cart_list">
              <ul>
                {this.state.list.map((item, index) => {
                  return (
                    <li className="item" key={index}>
                      <div className="left_food">
                        <img src={`${this.state.api}${item.img_url}`} alt="" />
                        <div className="food_info">
                          <p>{item.title}</p>
                          <p className="price">¥{item.price}</p>
                        </div>
                      </div>
                      <div className="right_cart">
                        <div className="cart_num">
                          <div
                            className="input_left"
                            onClick={this.decCount.bind(this, item, index)}
                          >
                            -
                          </div>
                          <div className="input_center">
                            <input
                              type="text"
                              readOnly
                              value={item.num}
                              name="num"
                              id="num"
                            />
                          </div>
                          <div
                            className="input_right"
                            onClick={this.incCount.bind(this, item, index)}
                          >
                            +
                          </div>
                        </div>
                      </div>
                    </li>
                  );
                })}
              </ul>
            </div>
          )}

          {this.state.totalNum == 0 && (
            <div className="cart_empty">您的购物车空空的，点击菜单开始点菜</div>
          )}

          <div className="hot_food">
            <h3>本店顾客最常点的菜</h3>
            <div className="item_list_outer">
              <ul className="item_list clearfix">
                <li>
                  <div className="inner">
                    <img src={require("../assets/images/1.jpg")} alt="" />
                    <p className="title">大蒜腊肉</p>
                    <p className="price">¥26</p>
                  </div>
                </li>
                <li>
                  <div className="inner">
                    <img src={require("../assets/images/2.jpg")} alt="" />
                    <p className="title">家乡扣肉</p>
                    <p className="price">¥26</p>
                  </div>
                </li>
                <li>
                  <div className="inner">
                    <img src={require("../assets/images/3.jpg")} alt="" />
                    <p className="title">主打鸡</p>
                    <p className="price">¥26</p>
                  </div>
                </li>
                <li>
                  <div className="inner">
                    <img src={require("../assets/images/4.jpg")} alt="" />
                    <p className="title">酸辣土豆丝</p>
                    <p className="price">¥26</p>
                  </div>
                </li>
                <li>
                  <div className="inner">
                    <img src={require("../assets/images/5.jpg")} alt="" />
                    <p className="title">大蒜腊肉</p>
                    <p className="price">¥26</p>
                  </div>
                </li>
                <li>
                  <div className="inner">
                    <img src={require("../assets/images/6.jpg")} alt="" />
                    <p className="title">家乡腊肉</p>
                    <p className="price">¥26</p>
                  </div>
                </li>
                <li>
                  <div className="inner">
                    <img src={require("../assets/images/1.jpg")} alt="" />
                    <p className="title">长沙臭豆腐</p>
                    <p className="price">¥26</p>
                  </div>
                </li>
                <li>
                  <div className="inner">
                    <img src={require("../assets/images/7.jpg")} alt="" />
                    <p className="title">大蒜腊肉</p>
                    <p className="price">¥26</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <NavFooter />

        <div id="footer_book" className="footer_book">
          <Link to="/home">
            <img src={require("../assets/images/menu.png")} alt="" />
            <p>菜单</p>
          </Link>
        </div>

        <div onClick={this.addOrder} id="footer_cart" className="footer_cart">
          <Link to="/order">
            <img src={require("../assets/images/doorder.png")} alt="" />
            <p>下单</p>
          </Link>
        </div>
      </div>
    );
  }
}

export default withRouter(Cart);