AntonioErdeljac

import React from "react";
import io from "socket.io-client";

class Chat extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            username: '',
            message: '',

AntonioErdeljac

var express = require('express');
var socket = require('socket.io');

var app = express();


server = app.listen(8080, function(){
    console.log('server is running on port 8080')
});

AntonioErdeljac

import React, { Component } from 'react';
import Chat from "./Chat";

class App extends Component {
  render() {
    return (
      <div>
          <Chat/>
      </div>
    );

AntonioErdeljac

import React from "react";

class Chat extends React.Component{
    render(){
        return (
            <div className="container">
                <div className="row">
                    <div className="col-4">
                        <div className="card">
                            <div className="card-body">

AntonioErdeljac

import React from "react";

class Chat extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            username: '',
            message: '',
            messages: []

AntonioErdeljac

<div className="messages">
    {this.state.messages.map(message => {
        return (
            <div>{message.author}: {message.message}</div>
        )
    })}
</div>

AntonioErdeljac

var express = require('express');
var app = express();

server = app.listen(8080, function(){
    console.log('server is running on port 8080')
});

AntonioErdeljac

var socket = require('socket.io');
io = socket(server);

io.on('connection', (socket) => {
    console.log(socket.id);
});

AntonioErdeljac

import React from "react";
import io from "socket.io-client";

class Chat extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            username: '',
            message: '',

AntonioErdeljac

<button onClick={this.sendMessage} className="btn btn-primary form-control">Send</button>