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

青旅半醒 2024-04-19 14:58 52阅读 0赞

**话不多说，直接上硬货**

如图所示（没有排版，排版的话就不做过多的在这里插入图片描述介绍了，见谅）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA3NzE3OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA3NzE3OA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA3NzE3OA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA3NzE3OA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA3NzE3OA_size_16_color_FFFFFF_t_70 4]  
在这里的话把用户名存到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**

**在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/  
**送大家一句话：如果乾坤未定，你我皆是黑马，加油！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA3NzE3OA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7081143aa5b3437f91fafcc044fddabd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA3NzE3OA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/17f256f622c54918b0190f8c4157e7b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA3NzE3OA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/05f18c4a37774bfd8f6212fb8d64301c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA3NzE3OA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/856608c054294bb2aa7336079e2fb713.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA3NzE3OA_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fae04ab240ec4713977b279ef36c436d.png