基于socketio 写一个聊天室

最新推荐文章于 2024-10-18 12:36:59 发布

原创

最新推荐文章于 2024-10-18 12:36:59 发布 · 905 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了一个使用React和Socket.IO实现的实时聊天室应用。前端部分通过Ant Design Mobile构建用户界面，并利用WebSocket技术实现实时通信。后端采用Netty Socket.IO库搭建服务器，配置Socket.IO参数以优化性能。

一、前端

import React from 'react';
import io from 'socket.io-client';
import {
   
    List, InputItem, Button, Text, SearchBar } from 'antd-mobile';
import style from './home.css';
import longzhu from '../../assets/images/longzhu.png';
import lubanqihao from '../../assets/images/lubanqihao.png';
import lvsheng1 from '../../assets/images/lvsheng1.jpg';

let socket;

const serverUri = 'http://175.24.121.152:10246';
const sendEvent = 'chat message';
const receiveEvent = 'chat message';

class ChatRoom extends React.Component {
   
   
  constructor(props) {
   
   
    super(props);
    this.state = {
   
   
      texts: [],
    };
  }

  componentDidMount() {
   
   
    this.connect(1101);
  }

  connect = (uid) => {
   
   
    socket = io.connect(serverUri, {
   
   
      'force new connection': true,
      query: 'UID=' + uid,
    });
    let this_ = this;
    socket.on('connect', function () {
   
   
      console.log('连接成功');
      //如果发送字符串send("hello Server"); *需要修改服务端接收类型
      this.send({
   
   
        name: 'client',
        message: 'hello Server',
      });
    });
    socket.on(receiveEvent, function (data) {
   
   
      this_.setState({
   
    texts: [...this_.state.texts, data.text] });
      console.log(data, this_.state.texts);
    });

    socket.on('disconnect', function () {
   
   
      console.log('连接断开');
    });
  };

  send(data) {
   
   
    socket.emit(sendEvent, data);
  }

  render() {
   
   
    return (
      <div className={
   
   style.chatRoom}>
        <textarea
          rows={
   
   32}
          id="sendMessage"
          onFocus={
   
   ()=>{
   
   
            setTimeout(function(){
   
   
              let input = document.getElementById('sendMessage');
              input.style.top = '350px';
            },400);
          }}
          onBlur={
   
   ()=>{
   
   
            setTimeout

最低0.47元/天解锁文章