用socket和react、egg编程一个聊天室工具

话不多说，直接上硬货

如图所示（没有排版，排版的话就不做过多的在这里插入图片描述介绍了，见谅）





在这里的话把用户名存到egg当中，如果游客2在聊天室中的话，会提示登录失败，重新换个马甲进去就可以了（注意：账户不能一样，否则会提示登录失败）

在react中src下的router/login.js
1、下载npm i socket.io-client --save

import React, { Component } from 'react'
import Axios from "axios";
import io from "socket.io-client"
export default class componentName extends Component {
    state = {
        name: "",  //登录的input
        config: "",//聊天室的input
        socket: io("192.168.31.38:5555"),//socket的使用放发
        list: "", //保存账户名字
        flag: false,  //设置div
        listDate: [] //存储聊天记录
    }
    arr(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    list() {
        let { name, list, flag } = this.state;
        console.log(name)
        Axios.post("/list", {
            name //把用户传到egg
        }).then(res => {
            alert(res.data.msg)
            if (res.data.code === 1) {  //判断账户是否存在
                let { list } = this.state;
                this.setState({
                    list: res.data.nsg.name,
                    flag: true   //显示聊天室
                })
            }
        })
    }
    dataList() {
        let { socket, list, config } = this.state;
        socket.emit("message", { 
            list, 
            config
        })
        this.setState({ config: "" })
    }
    render() {
        let { name, config, listDate, flag } = this.state;
        return (
            <div className="App" >

                <div className="header">
                    <input type="text" value={name} placeholder="请输入账号" name="name" onChange={this.arr.bind(this)} />
                    <button onClick={this.list.bind(this)}>注册</button>
                </div>


                {
                    flag && <div className="main">
                        <h3>聊天室</h3>
                        <ul>
                            {listDate && listDate.map((item, index) => {
                                return <div key={index}>
                                    账户：{item.list}
                                    内容：{item.config}
                                </div>
                            })}
                        </ul>
                        <input type="text" placeholder="请输入内容" value={config} name="config" onChange={this.arr.bind(this)} />
                        <button onClick={this.dataList.bind(this)}>聊天</button>
                    </div>
                }

            </div>
        )
    }
    componentDidMount() {
        let { socket,listDate } = this.state;
        socket.on("message", (data) => {
            listDate.push(data)
            this.setState({ listDate })

        })

    }
}

在socket中 app.js

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

io.on('connection', function(socket){
    console.log('连接了');
    socket.on('message', function(data){
        let {list,config} =data;
      socket.emit("message",data,config); //自己能看到自己发出的消息
      socket.broadcast.emit("message",data,config) //所有能看见你发出的消息，自己看不见
    });
  });
http.listen(5555, function(){
  console.log('listening on *:5555');
});

在egg中app下的controller/login.js

'use strict';

const Controller = require('egg').Controller;

class LoginController extends Controller {
  async index() {
    const { ctx } = this;
    const name = ctx.request.body.name;
    console.log(ctx.request.body);
    const flag = await this.app.mysql.get('login', {name});  //查找数据库有没有相同的name
    if(flag){
      ctx.body = {
        code:-1,
        msg:"登录失败"
      };
    }else{
      const router = await this.app.mysql.insert('login', {name});//没有的话，插入到数据库
      const nsg = await this.app.mysql.get('login', {name});  
      ctx.body = {
        code:1,
        msg:"登录成功",
        nsg
      };
    }
    
  }
}

module.exports = LoginController;

遇到过的问题如下:
在react中在state中定义socket的时候，必须是电脑的ip：socket: io(“192.168.31.38:5555”),如果是socket: io(“http://localhost:5555”) 自己能进入聊天室 别人进不去。切记
egg地址：https://eggjs.org/zh-cn/intro/index.html?tdsourcetag=s_pcqq_aiomsg
react地址：https://react-1251415695.cos-website.ap-chengdu.myqcloud.com/docs/hello-world.html
socket地址：https://socket.io/get-started/chat/
送大家一句话：如果乾坤未定，你我皆是黑马，加油！