Compare commits
No commits in common. "654f5346460ca5c2838ecbbdd912b38207faec54" and "5782c339d537b3d3a21443a61a12dcaf46f0d7bf" have entirely different histories.
654f534646
...
5782c339d5
@ -1,50 +1,65 @@
|
||||
module.exports = io => {
|
||||
io.on('connection', async socket => {
|
||||
console.log(`A socket connection to the server has been made: ${socket.id}`)
|
||||
socket.join('#projex', () => {
|
||||
sendUsers()
|
||||
sendNamespaces()
|
||||
socket.join('#chat', () => {
|
||||
socket.emit('get my rooms', socket.rooms)
|
||||
})
|
||||
|
||||
socket.on('message', message => {
|
||||
console.log('sending message to namespace', message.namespace, message)
|
||||
io.to(message.namespace).emit('message', message)
|
||||
io.to(message.room).emit(message)
|
||||
})
|
||||
|
||||
socket.on('get users', () => {
|
||||
console.log('get users')
|
||||
sendUsers()
|
||||
socket.on('get all users', () => {
|
||||
console.log('get all users')
|
||||
console.log(Object.keys(io.sockets.sockets))
|
||||
})
|
||||
|
||||
socket.on('join', namespace => {
|
||||
console.log('join:', namespace)
|
||||
socket.join(namespace, () => {
|
||||
sendNamespaces()
|
||||
})
|
||||
})
|
||||
|
||||
socket.on('part', () => {
|
||||
console.log('part')
|
||||
})
|
||||
|
||||
socket.on('get namespaces', () => sendNamespaces())
|
||||
|
||||
const sendNamespaces = () => {
|
||||
const namespaces = Object.keys(io.sockets.adapter.rooms).map(k => ({
|
||||
namespace: k,
|
||||
socket.on('get all rooms', () => {
|
||||
console.log('get all rooms')
|
||||
console.log(
|
||||
Object.keys(io.sockets.adapter.rooms)
|
||||
.filter(r => r[0] === '#')
|
||||
.map(k => ({
|
||||
roomName: k,
|
||||
sockets: Object.keys(io.sockets.adapter.rooms[k]['sockets']),
|
||||
}))
|
||||
io.emit('got namespaces', namespaces)
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
const sendUsers = () =>
|
||||
socket.emit('got users', Object.keys(io.sockets.sockets))
|
||||
socket.on('get my rooms', () => {
|
||||
console.log('get my rooms')
|
||||
console.log(Object.keys(socket.rooms))
|
||||
})
|
||||
|
||||
socket.on('join a room', roomName => {
|
||||
console.log('join a room')
|
||||
socket.join(roomName, () => {
|
||||
socket.emit('get my rooms')
|
||||
})
|
||||
})
|
||||
|
||||
socket.on('leave a room', () => {
|
||||
console.log('leave a room')
|
||||
})
|
||||
|
||||
socket.on('join', payload => {
|
||||
console.log(payload.room)
|
||||
socket.join({ room: payload.room }, () => {
|
||||
socket.emit('got user rooms', Object.keys(socket.rooms))
|
||||
})
|
||||
})
|
||||
socket.on('disconnect', async () => {
|
||||
io.emit('user disconnected', { socketId: socket.id })
|
||||
console.log(`${socket.id} has disconnected.`)
|
||||
sendNamespaces()
|
||||
sendUsers()
|
||||
io.emit(
|
||||
'received rooms',
|
||||
Object.keys(io.sockets.adapter.rooms)
|
||||
.filter(r => r[0] === '#')
|
||||
.map(k => ({
|
||||
roomName: k,
|
||||
sockets: Object.keys(io.sockets.adapter.rooms[k]['sockets']),
|
||||
}))
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
143
src/App.js
143
src/App.js
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import socket from './socket'
|
||||
|
||||
import { Navbar, Nav, Dropdown, Button } from 'react-bootstrap'
|
||||
import { Navbar, Nav, Dropdown, DropdownButton, Button } from 'react-bootstrap'
|
||||
import uuid from 'uuid'
|
||||
import moment from 'moment'
|
||||
|
||||
@ -9,9 +9,10 @@ const initialState = {
|
||||
loading: true,
|
||||
messages: [],
|
||||
message: '',
|
||||
namespaces: [],
|
||||
namespace: '/',
|
||||
allUsers: [],
|
||||
allRooms: [],
|
||||
myRooms: [],
|
||||
room: '/',
|
||||
users: [],
|
||||
user: {},
|
||||
}
|
||||
|
||||
@ -22,7 +23,7 @@ class App extends React.Component {
|
||||
this.socket = socket
|
||||
this.handleChange = this.handleChange.bind(this)
|
||||
this.handleSubmit = this.handleSubmit.bind(this)
|
||||
this.join = this.join.bind(this)
|
||||
this.joinRoom = this.joinRoom.bind(this)
|
||||
}
|
||||
|
||||
async fetchData() {
|
||||
@ -31,10 +32,9 @@ class App extends React.Component {
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchData()
|
||||
this.socket.on('connect', () => {
|
||||
console.log('connected!')
|
||||
const user = { socketId: this.socket.id }
|
||||
this.setState({ user })
|
||||
this.socket.on('message', msg => {
|
||||
const messages = this.state.messages.concat(msg)
|
||||
this.setState({ messages })
|
||||
})
|
||||
|
||||
this.socket.on('user connected', payload => {
|
||||
@ -45,19 +45,14 @@ class App extends React.Component {
|
||||
console.log('a user disconnected.', payload)
|
||||
})
|
||||
|
||||
this.socket.on('got namespaces', namespaces => {
|
||||
console.log('got namespaces:', namespaces)
|
||||
this.setState({ namespaces })
|
||||
this.socket.on('received rooms', rooms => {
|
||||
console.log(rooms)
|
||||
this.setState({ rooms })
|
||||
})
|
||||
|
||||
this.socket.on('got users', allUsers => {
|
||||
console.log('got users:', allUsers)
|
||||
this.setState({ allUsers })
|
||||
})
|
||||
|
||||
this.socket.on('message', msg => {
|
||||
const messages = this.state.messages.concat(msg)
|
||||
this.setState({ messages })
|
||||
this.socket.on('get user rooms', roomArray => {
|
||||
const myRooms = roomArray.filter(roomString => roomString[0] === '#')
|
||||
this.setState({ myRooms })
|
||||
})
|
||||
}
|
||||
|
||||
@ -65,26 +60,15 @@ class App extends React.Component {
|
||||
this.setState({ [e.target.name]: e.target.value })
|
||||
}
|
||||
|
||||
parseCommand() {
|
||||
const args = this.state.message.split(' ')
|
||||
const cmd = args[0].slice(1)
|
||||
console.log('command:', cmd)
|
||||
if (cmd === 'join') this.join(args[1])
|
||||
this.setState({ message: '' })
|
||||
}
|
||||
handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
|
||||
if (this.state.message[0] === '/') return this.parseCommand()
|
||||
|
||||
const message = {
|
||||
id: uuid(),
|
||||
date: moment().format('MMMM D YYYY, h:mm a'),
|
||||
socketId: this.socket.id,
|
||||
text: this.state.message,
|
||||
namespace: this.state.namespace,
|
||||
room: this.state.room,
|
||||
}
|
||||
|
||||
this.sendMessage(message)
|
||||
this.setState({ message: '' })
|
||||
}
|
||||
@ -95,22 +79,13 @@ class App extends React.Component {
|
||||
renderError() {
|
||||
return <div>something went wrong.</div>
|
||||
}
|
||||
join(namespace) {
|
||||
if (namespace.slice(0, 1) !== '#') return alert('Use a leading #, silly!')
|
||||
console.log('joining', namespace)
|
||||
this.socket.emit('join', namespace)
|
||||
this.setState({ namespace })
|
||||
joinRoom(room) {
|
||||
this.socket.emit('join', { room })
|
||||
}
|
||||
sendMessage(msg) {
|
||||
this.socket.emit('message', msg)
|
||||
}
|
||||
renderApp() {
|
||||
const title =
|
||||
this.state.namespace[0] === '#'
|
||||
? 'Channel'
|
||||
: this.state.namespace[0] === '/'
|
||||
? 'server messages'
|
||||
: 'User'
|
||||
return (
|
||||
<main role="main" className="d-flex h-100 flex-column">
|
||||
{/*Navbar*/}
|
||||
@ -120,35 +95,55 @@ class App extends React.Component {
|
||||
<Nav className="ml-auto mr-3">
|
||||
<Dropdown>
|
||||
<Dropdown.Toggle variant="dark" id="dropdown-basic">
|
||||
Users
|
||||
All Users
|
||||
</Dropdown.Toggle>
|
||||
|
||||
<Dropdown.Menu className="bg-dark">
|
||||
{this.state.allUsers.map(u => (
|
||||
<Dropdown.Item key={u} className="bg-dark text-light">
|
||||
{u}
|
||||
{this.state.users.map(r => (
|
||||
<Dropdown.Item className="bg-dark text-light">
|
||||
{r.roomName}
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
<Dropdown>
|
||||
<Dropdown.Toggle variant="dark" id="dropdown-basic">
|
||||
Channels
|
||||
All Channels
|
||||
</Dropdown.Toggle>
|
||||
|
||||
<Dropdown.Menu className="bg-dark">
|
||||
{this.state.namespaces.map(r => (
|
||||
<Dropdown.Item
|
||||
key={r.namespace}
|
||||
className="bg-dark text-light"
|
||||
onClick={() => this.join(r.namespace)}
|
||||
>
|
||||
{r.namespace}
|
||||
{this.state.allRooms.map(r => (
|
||||
<Dropdown.Item className="bg-dark text-light">
|
||||
{r.roomName}
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Nav>
|
||||
<Button
|
||||
variant="dark"
|
||||
onClick={() => {
|
||||
this.socket.emit('get all users')
|
||||
}}
|
||||
>
|
||||
Get All Users
|
||||
</Button>
|
||||
<Button
|
||||
variant="dark"
|
||||
onClick={() => {
|
||||
this.socket.emit('get all rooms')
|
||||
}}
|
||||
>
|
||||
Get All Rooms
|
||||
</Button>
|
||||
<Button
|
||||
variant="dark"
|
||||
onClick={() => {
|
||||
this.socket.emit('get my rooms')
|
||||
}}
|
||||
>
|
||||
Get My Rooms
|
||||
</Button>
|
||||
</Navbar.Collapse>
|
||||
</Navbar>
|
||||
|
||||
@ -159,30 +154,16 @@ class App extends React.Component {
|
||||
id="sidebar2"
|
||||
>
|
||||
<h5 className=" border-bottom pb-2">User Channels</h5>
|
||||
|
||||
<Button
|
||||
key="/"
|
||||
<p>this currently shows all channels</p>
|
||||
{this.state.myRooms.map(r => (
|
||||
<button
|
||||
key={r.roomName}
|
||||
className="btn btn-dark d-flex"
|
||||
onClick={() => this.setState({ namespace: '/' })}
|
||||
onClick={() => this.joinRoom(r.roomName)}
|
||||
>
|
||||
<div className="mr-auto">server</div>
|
||||
{/*<div className="ml-auto">{this.state.allUsers.length}</div>*/}
|
||||
</Button>
|
||||
{this.state.namespaces
|
||||
.filter(
|
||||
r =>
|
||||
r.namespace[0] === '#' &&
|
||||
r.sockets.includes(this.state.user.socketId)
|
||||
)
|
||||
.map(r => (
|
||||
<Button
|
||||
key={r.namespace}
|
||||
className="btn btn-dark d-flex"
|
||||
onClick={() => this.setState({ namespace: r.namespace })}
|
||||
>
|
||||
<div className="mr-auto">{r.namespace}</div>
|
||||
<div className="mr-auto">{r.roomName}</div>
|
||||
<div className="ml-auto">{r.sockets.length}</div>
|
||||
</Button>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -190,15 +171,13 @@ class App extends React.Component {
|
||||
<div className="bg-secondary d-flex flex-column flex-grow-1 px-2 pb-4">
|
||||
{/*Main Section Header*/}
|
||||
<div className="d-flex justify-content-between flex-wrap flex-md-nowrap pt-3 pb-2 mb-3 border-bottom">
|
||||
<h4 className="mr-auto ml-3">
|
||||
{title}: {this.state.namespace}
|
||||
</h4>
|
||||
<h4 className="mr-auto ml-3">current channel</h4>
|
||||
</div>
|
||||
{/*Main Section Content*/}
|
||||
<div className="d-flex flex-column border border-secondary flex-grow-1">
|
||||
<div className="bg-dark flex-grow-1 p-2 text-light">
|
||||
{this.state.messages
|
||||
.filter(m => m.namespace === this.state.namespace)
|
||||
.filter(m => m.room === this.state.room)
|
||||
.map(m => (
|
||||
<div className="d-flex justify-content-between" key={m.id}>
|
||||
<div>{m.date}</div>
|
||||
@ -215,13 +194,13 @@ class App extends React.Component {
|
||||
placeholder="Enter message"
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
<Button
|
||||
<button
|
||||
className="btn btn-dark"
|
||||
type="submit"
|
||||
onSubmit={this.handleSubmit}
|
||||
>
|
||||
submit
|
||||
</Button>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user