added namespaces
This commit is contained in:
data
parent
5782c339d5
commit
4c63be54ea
@ -2,64 +2,62 @@ module.exports = io => {
|
||||
io.on('connection', async socket => {
|
||||
console.log(`A socket connection to the server has been made: ${socket.id}`)
|
||||
socket.join('#chat', () => {
|
||||
socket.emit('get my rooms', socket.rooms)
|
||||
sendAllRooms()
|
||||
sendAllUsers()
|
||||
})
|
||||
|
||||
socket.on('message', message => {
|
||||
io.to(message.room).emit(message)
|
||||
console.log(`send a message to room ${message.room}: ${message}`)
|
||||
io.of(message.room).emit('message', message)
|
||||
})
|
||||
|
||||
socket.on('get all users', () => {
|
||||
console.log('get all users')
|
||||
console.log(Object.keys(io.sockets.sockets))
|
||||
})
|
||||
|
||||
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']),
|
||||
}))
|
||||
)
|
||||
sendAllUsers()
|
||||
})
|
||||
|
||||
socket.on('get my rooms', () => {
|
||||
console.log('get my rooms')
|
||||
console.log(Object.keys(socket.rooms))
|
||||
sendAllRooms()
|
||||
})
|
||||
|
||||
socket.on('join a room', roomName => {
|
||||
console.log('join a room')
|
||||
socket.on('join', roomName => {
|
||||
console.log('join:', roomName)
|
||||
socket.join(roomName, () => {
|
||||
socket.emit('get my rooms')
|
||||
sendAllRooms()
|
||||
})
|
||||
})
|
||||
|
||||
socket.on('leave a room', () => {
|
||||
console.log('leave a room')
|
||||
socket.on('part', () => {
|
||||
console.log('part')
|
||||
})
|
||||
|
||||
socket.on('join', payload => {
|
||||
console.log(payload.room)
|
||||
socket.join({ room: payload.room }, () => {
|
||||
socket.emit('got user rooms', Object.keys(socket.rooms))
|
||||
socket.on('get all rooms', () => sendAllRooms())
|
||||
socket.on('send all clients', () => {
|
||||
// https://socket.io/docs/server-api/#namespace-clients-callback
|
||||
io.clients((error, clients) => {
|
||||
if (error) throw error
|
||||
console.log(clients)
|
||||
})
|
||||
})
|
||||
|
||||
const sendAllRooms = () => {
|
||||
console.log('get all rooms')
|
||||
const allRooms = 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 all rooms', allRooms)
|
||||
}
|
||||
|
||||
const sendAllUsers = () =>
|
||||
socket.emit('got all users', Object.keys(io.sockets.sockets))
|
||||
|
||||
socket.on('disconnect', async () => {
|
||||
io.emit('user disconnected', { socketId: socket.id })
|
||||
console.log(`${socket.id} has disconnected.`)
|
||||
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']),
|
||||
}))
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
120
src/App.js
120
src/App.js
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import socket from './socket'
|
||||
|
||||
import { Navbar, Nav, Dropdown, DropdownButton, Button } from 'react-bootstrap'
|
||||
import { Navbar, Nav, Dropdown, Button } from 'react-bootstrap'
|
||||
import uuid from 'uuid'
|
||||
import moment from 'moment'
|
||||
|
||||
@ -10,9 +10,8 @@ const initialState = {
|
||||
messages: [],
|
||||
message: '',
|
||||
allRooms: [],
|
||||
myRooms: [],
|
||||
room: '/',
|
||||
users: [],
|
||||
allUsers: [],
|
||||
user: {},
|
||||
}
|
||||
|
||||
@ -23,7 +22,7 @@ class App extends React.Component {
|
||||
this.socket = socket
|
||||
this.handleChange = this.handleChange.bind(this)
|
||||
this.handleSubmit = this.handleSubmit.bind(this)
|
||||
this.joinRoom = this.joinRoom.bind(this)
|
||||
this.join = this.join.bind(this)
|
||||
}
|
||||
|
||||
async fetchData() {
|
||||
@ -32,9 +31,11 @@ class App extends React.Component {
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchData()
|
||||
this.socket.on('message', msg => {
|
||||
const messages = this.state.messages.concat(msg)
|
||||
this.setState({ messages })
|
||||
this.socket.on('connect', () => {
|
||||
console.log('connected!')
|
||||
this.socket.emit('get all rooms')
|
||||
const user = { socketId: this.socket.id }
|
||||
this.setState({ user })
|
||||
})
|
||||
|
||||
this.socket.on('user connected', payload => {
|
||||
@ -45,14 +46,19 @@ class App extends React.Component {
|
||||
console.log('a user disconnected.', payload)
|
||||
})
|
||||
|
||||
this.socket.on('received rooms', rooms => {
|
||||
console.log(rooms)
|
||||
this.setState({ rooms })
|
||||
this.socket.on('got all rooms', allRooms => {
|
||||
console.log('got all rooms:', allRooms)
|
||||
this.setState({ allRooms })
|
||||
})
|
||||
|
||||
this.socket.on('get user rooms', roomArray => {
|
||||
const myRooms = roomArray.filter(roomString => roomString[0] === '#')
|
||||
this.setState({ myRooms })
|
||||
this.socket.on('got all users', allUsers => {
|
||||
console.log('got all users:', allUsers)
|
||||
this.setState({ allUsers })
|
||||
})
|
||||
|
||||
this.socket.on('message', msg => {
|
||||
const messages = this.state.messages.concat(msg)
|
||||
this.setState({ messages })
|
||||
})
|
||||
}
|
||||
|
||||
@ -60,8 +66,18 @@ 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.socket.emit('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'),
|
||||
@ -79,8 +95,8 @@ class App extends React.Component {
|
||||
renderError() {
|
||||
return <div>something went wrong.</div>
|
||||
}
|
||||
joinRoom(room) {
|
||||
this.socket.emit('join', { room })
|
||||
join(room) {
|
||||
this.socket.emit('join', room)
|
||||
}
|
||||
sendMessage(msg) {
|
||||
this.socket.emit('message', msg)
|
||||
@ -99,9 +115,9 @@ class App extends React.Component {
|
||||
</Dropdown.Toggle>
|
||||
|
||||
<Dropdown.Menu className="bg-dark">
|
||||
{this.state.users.map(r => (
|
||||
{this.state.allUsers.map(u => (
|
||||
<Dropdown.Item className="bg-dark text-light">
|
||||
{r.roomName}
|
||||
{u}
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
@ -113,37 +129,16 @@ class App extends React.Component {
|
||||
|
||||
<Dropdown.Menu className="bg-dark">
|
||||
{this.state.allRooms.map(r => (
|
||||
<Dropdown.Item className="bg-dark text-light">
|
||||
<Dropdown.Item
|
||||
className="bg-dark text-light"
|
||||
onClick={() => this.joinRoom(r.roomName)}
|
||||
>
|
||||
{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>
|
||||
|
||||
@ -154,37 +149,36 @@ class App extends React.Component {
|
||||
id="sidebar2"
|
||||
>
|
||||
<h5 className=" border-bottom pb-2">User Channels</h5>
|
||||
<p>this currently shows all channels</p>
|
||||
{this.state.myRooms.map(r => (
|
||||
<button
|
||||
key={r.roomName}
|
||||
className="btn btn-dark d-flex"
|
||||
onClick={() => this.joinRoom(r.roomName)}
|
||||
>
|
||||
<div className="mr-auto">{r.roomName}</div>
|
||||
<div className="ml-auto">{r.sockets.length}</div>
|
||||
</button>
|
||||
))}
|
||||
{this.state.allRooms
|
||||
.filter(r => r.sockets.includes(this.state.user.socketId))
|
||||
.map(r => (
|
||||
<button
|
||||
key={r.roomName}
|
||||
className="btn btn-dark d-flex"
|
||||
onClick={() => this.setState({ room: r.roomName })}
|
||||
>
|
||||
<div className="mr-auto">{r.roomName}</div>
|
||||
<div className="ml-auto">{r.sockets.length}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/*Main Section*/}
|
||||
<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">current channel</h4>
|
||||
<h4 className="mr-auto ml-3">Channel: {this.state.room}</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.room === this.state.room)
|
||||
.map(m => (
|
||||
<div className="d-flex justify-content-between" key={m.id}>
|
||||
<div>{m.date}</div>
|
||||
<div>{m.socketId}</div>
|
||||
<div>{m.text}</div>
|
||||
</div>
|
||||
))}
|
||||
{this.state.messages.map(m => (
|
||||
<div className="d-flex justify-content-between" key={m.id}>
|
||||
<div>{m.date}</div>
|
||||
<div>{m.socketId}</div>
|
||||
<div>{m.text}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<input
|
||||
|
||||
Loading…
Reference in New Issue
Block a user