Simple Chat based on ReactJs using SocketIO

English Instructions:

Warning My time is becoming limited. If you want improvements, please help me make that happen and donate some of your time to this project.

This project aims to be a plug&play server that all you'll need to do is import the component. and use it. Let me know if you struggle to install it. Unlike the other Reactjs chat apps this will stand alone and you don't really have to combine with the nodejs back end. In reality you just have to have a javascript socket listening on port 9000.

If you want to help or file a bug report , please check github

Demo and make test code, git clone this from

https://github.com/ApertureSecurity/Reactjs-Chat-Component

and make your changes in the Reactjs-Chat-Component/Frontend/demo/chatapp.js file. and run

npm install
npm start

The server is located in Reactjs-Chat-Component/index.js you can just cd to the directory and run

node_modules/nodemon/bin/nodemon.js  index

INSTALL

To install Frontend, go to the Frontend folder and run

npm install

This will pull down all the node packages needed.

Then simply just import the component.

import  Chatapp    from "reactjs-chatapp";

for the back end, you can install the back end using npm install. Afterwards, you can run the server using nodemon. to run it.

node_modules/nodemon/bin/nodemon.js  index

I have added a link to my index.html in my reactjs project to reference the stylesheet. You can of course change this to your liking.

<link rel="stylesheet" type="text/css" href="./chat-style.css">

If you don't want to use our back end here is a simple nodejs server code snippet that will work with this. You should be able to simply copy this and paste it into your server app. It listens on port 9000 by default.

(github server link)[https://github.com/ApertureSecurity/Reactjs-Chat-Component/blob/master/index.js]

<Chatapp authenticated="true" MainRoom="Global Chat"  servername="SlaBot" welcomemessage="Welcome to ChatApp (^=^)" uri="http://localhost:9000"  hardpath="/socket.io" reconnect="true" resource="/" secure="false" />

Known issues:

warnings upon install: This is normal

+-- reactjs-chatapp@1.0.21
| +-- UNMET PEER DEPENDENCY react@^16
| `-- UNMET PEER DEPENDENCY react-dom@^16
`-- UNMET PEER DEPENDENCY socket.io-client@^1.4.5

Things to add:

• <input checked="" disabled="" type="checkbox">
  1. Emoji use.
• <input checked="" disabled="" type="checkbox">
  1. Private chat.
• <input checked="" disabled="" type="checkbox">
  1. User selection in chat.
• <input checked="" disabled="" type="checkbox">
  1. More styling.
• <input checked="" disabled="" type="checkbox">
  1. Make this an NPM module.
• <input disabled="" type="checkbox">
  1. Check for duplicate user names.
• <input disabled="" type="checkbox">
  1. Use Cookie based authentication.