e2m/dispatch
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add message scrollback

Browse Source
This commit is contained in:
Ken-Håvard Lieng 2017-05-02 23:21:25 +02:00
parent b5d12954a6
commit 45c61e7596
16 changed files with 313 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
assets/bindata.go
View File

File diff suppressed because one or more lines are too long

7
client/src/css/style.css
View File

@ -403,6 +403,13 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
right: 200px;
}
.messagebox-top-indicator {
color: #999;
height: 100px;
text-align: center;
padding-top: 40px;
}
.VirtualScroll {
overflow-x: hidden !important;
}

1
client/src/js/actions.js
View File

@ -5,6 +5,7 @@ export const CLOSE_PRIVATE_CHAT = 'CLOSE_PRIVATE_CHAT';
export const COMMAND = 'COMMAND';
export const CONNECT = 'CONNECT';
export const DISCONNECT = 'DISCONNECT';
export const FETCH_MESSAGES = 'FETCH_MESSAGES';
export const HIDE_MENU = 'HIDE_MENU';
export const INPUT_HISTORY_ADD = 'INPUT_HISTORY_ADD';
export const INPUT_HISTORY_DECREMENT = 'INPUT_HISTORY_DECREMENT';

36
client/src/js/actions/message.js
View File

@ -1,5 +1,6 @@
import * as actions from '../actions';
import { findBreakpoints, messageHeight, linkify, timestamp } from '../util';
import { getSelectedMessages } from '../reducers/messages';
let nextID = 0;
@ -47,6 +48,32 @@ function getMessageTab(server, to) {
return to;
}
export function fetchMessages() {
return (dispatch, getState) => {
const state = getState();
const first = getSelectedMessages(state).get(0);
if (!first) {
return;
}
const tab = state.tab.selected;
if (tab.isChannel()) {
dispatch({
type: actions.FETCH_MESSAGES,
socket: {
type: 'fetch_messages',
data: {
server: tab.server,
channel: tab.name,
next: first.id
}
}
});
}
};
}
export function updateMessageHeight() {
return (dispatch, getState) => dispatch({
type: actions.UPDATE_MESSAGE_HEIGHT,
@ -86,19 +113,24 @@ export function addMessage(message, server, to) {
});
}
export function addMessages(messages, server, to) {
export function addMessages(messages, server, to, prepend, next) {
const tab = getMessageTab(server, to);
return (dispatch, getState) => {
const state = getState();
if (next) {
messages[0].id = next;
}
messages.forEach(message => initMessage(message, server, message.tab || tab, state));
dispatch({
type: actions.ADD_MESSAGES,
server,
tab,
messages
messages,
prepend
});
};
}

2
client/src/js/components/Message.js
View File

@ -1,8 +1,6 @@
import React, { PureComponent } from 'react';
export default class Message extends PureComponent {
handleNickClick = () => this.props.onNickClick(this.props.message);
render() {
const { message } = this.props;
const className = message.type ? `message message-${message.type}` : 'message';

103
client/src/js/components/MessageBox.js
View File

@ -1,34 +1,65 @@
import React, { PureComponent } from 'react';
import { List } from 'react-virtualized/dist/commonjs/List';
import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
import debounce from 'lodash/debounce';
import Message from './Message';
import { measureScrollBarWidth } from '../util';
const scrollBarWidth = measureScrollBarWidth();
const listStyle = { padding: '7px 0', boxSizing: 'content-box' };
const threshold = 100;
export default class MessageBox extends PureComponent {
componentWillUpdate(nextProps) {
if (nextProps.messages !== this.props.messages) {
this.list.recomputeRowHeights();
}
if (nextProps.tab !== this.props.tab) {
this.bottom = true;
}
if (nextProps.messages !== this.props.messages) {
this.list.recomputeRowHeights();
if (nextProps.messages.get(0) !== this.props.messages.get(0)) {
if (nextProps.tab === this.props.tab) {
const addedMessages = nextProps.messages.size - this.props.messages.size;
let addedHeight = 0;
for (let i = 0; i < addedMessages; i++) {
addedHeight += nextProps.messages.get(i).height;
}
this.nextScrollTop = addedHeight + this.container.scrollTop;
}
this.loading = false;
}
}
componentDidUpdate() {
if (this.bottom) {
this.list.scrollToRow(this.props.messages.size);
if (this.nextScrollTop > 0) {
this.container.scrollTop = this.nextScrollTop;
this.nextScrollTop = 0;
} else if (this.bottom) {
this.container.scrollTop = this.container.scrollHeight;
}
this.updateWidth();
}
getRowHeight = ({ index }) => this.props.messages.get(index).height;
getRowHeight = ({ index }) => {
if (index === 0) {
if (this.props.hasMoreMessages) {
return 100;
}
return 0;
}
return this.props.messages.get(index - 1).height;
}
listRef = el => { this.list = el; };
listRef = el => {
this.list = el;
// eslint-disable-next-line no-underscore-dangle
this.container = el.Grid._scrollingContainer;
};
updateWidth = (width) => {
const { tab, setWrapWidth, updateMessageHeight } = this.props;
@ -42,9 +73,7 @@ export default class MessageBox extends PureComponent {
this.width = wrapWidth;
}
// eslint-disable-next-line no-underscore-dangle
const container = this.list.Grid._scrollingContainer;
if (container.scrollHeight > container.clientHeight) {
if (this.container.scrollHeight > this.container.clientHeight) {
wrapWidth -= scrollBarWidth;
}
@ -59,13 +88,59 @@ export default class MessageBox extends PureComponent {
this.updateWidth(size.width - 30);
};
fetchMore = debounce(() => {
this.loading = true;
this.props.onFetchMore();
}, 100);
handleScroll = ({ scrollTop, clientHeight, scrollHeight }) => {
if (this.props.hasMoreMessages &&
scrollTop <= threshold &&
scrollTop < this.prevScrollTop &&
!this.loading) {
if (this.mouseDown) {
this.shouldFetch = true;
} else {
this.fetchMore();
}
}
this.bottom = scrollTop + clientHeight >= scrollHeight;
this.prevScrollTop = scrollTop;
};
handleMouseDown = () => {
this.mouseDown = true;
};
handleMouseUp = () => {
this.mouseDown = false;
if (this.shouldFetch) {
this.shouldFetch = false;
this.loading = true;
this.props.onFetchMore();
}
};
renderMessage = ({ index, style }) => {
if (index === 0) {
if (this.props.hasMoreMessages) {
return (
<div
key="top"
className="messagebox-top-indicator"
style={style}
>
Loading messages...
</div>
);
}
return null;
}
const { messages, onNickClick } = this.props;
const message = messages.get(index);
const message = messages.get(index - 1);
return (
<Message
@ -79,14 +154,18 @@ export default class MessageBox extends PureComponent {
render() {
return (
<div className="messagebox">
<div
className="messagebox"
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
>
<AutoSizer onResize={this.handleResize}>
{({ width, height }) => (
<List
ref={this.listRef}
width={width}
height={height - 14}
rowCount={this.props.messages.size}
rowCount={this.props.messages.size + 1}
rowHeight={this.getRowHeight}
rowRenderer={this.renderMessage}
onScroll={this.handleScroll}

32
client/src/js/containers/Chat.js
View File

@ -12,12 +12,14 @@ import { part } from '../actions/channel';
import { openPrivateChat, closePrivateChat } from '../actions/privateChat';
import { searchMessages, toggleSearch } from '../actions/search';
import { select, setSelectedTab } from '../actions/tab';
import { runCommand, sendMessage, updateMessageHeight } from '../actions/message';
import { runCommand, sendMessage, updateMessageHeight, fetchMessages } from '../actions/message';
import { disconnect } from '../actions/server';
import { setWrapWidth, setCharWidth } from '../actions/environment';
import { stringWidth } from '../util';
import { toggleUserList } from '../actions/ui';
import * as inputHistoryActions from '../actions/inputHistory';
import { getSelectedTab } from '../reducers/tab';
import { getSelectedMessages } from '../reducers/messages';
function updateSelected({ params, dispatch }) {
if (params.server) {
@ -64,9 +66,11 @@ class Chat extends PureComponent {
this.props.select(tab.server, message.from);
};
handleFetchMore = () => this.props.dispatch(fetchMessages());
render() {
const { title, tab, channel, search, history,
messages, users, showUserList, inputActions } = this.props;
messages, hasMoreMessages, users, showUserList, inputActions } = this.props;
let chatClass;
if (tab.isChannel()) {
@ -95,10 +99,12 @@ class Chat extends PureComponent {
/>
<MessageBox
messages={messages}
hasMoreMessages={hasMoreMessages}
tab={tab}
setWrapWidth={this.props.setWrapWidth}
updateMessageHeight={this.props.updateMessageHeight}
onNickClick={this.handleMessageNickClick}
onFetchMore={this.handleFetchMore}
/>
<MessageInput
tab={tab}
@ -120,8 +126,6 @@ class Chat extends PureComponent {
}
}
const tabSelector = state => state.tab.selected;
const messageSelector = state => state.messages;
const serverSelector = state => state.servers;
const channelSelector = state => state.channels;
const searchSelector = state => state.search;
@ -134,14 +138,8 @@ const historySelector = state => {
return state.input.history.get(state.input.index);
};
const selectedMessagesSelector = createSelector(
tabSelector,
messageSelector,
(tab, messages) => messages.getIn([tab.server, tab.name || tab.server], List())
);
const selectedChannelSelector = createSelector(
tabSelector,
getSelectedTab,
channelSelector,
(tab, channels) => channels.getIn([tab.server, tab.name], Map())
);
@ -152,16 +150,22 @@ const usersSelector = createSelector(
);
const titleSelector = createSelector(
tabSelector,
getSelectedTab,
serverSelector,
(tab, servers) => tab.name || servers.getIn([tab.server, 'name'])
);
const getHasMoreMessages = createSelector(
getSelectedMessages,
messages => messages.get(0) && typeof messages.get(0).id === 'string'
);
const mapStateToProps = createStructuredSelector({
title: titleSelector,
tab: tabSelector,
tab: getSelectedTab,
channel: selectedChannelSelector,
messages: selectedMessagesSelector,
messages: getSelectedMessages,
hasMoreMessages: getHasMoreMessages,
users: usersSelector,
showUserList: showUserListSelector,
search: searchSelector,

4
client/src/js/index.js
View File

@ -48,8 +48,8 @@ if (env.users) {
}
if (env.messages) {
const { messages, server, to } = env.messages;
store.dispatch(addMessages(messages, server, to));
const { messages, server, to, next } = env.messages;
store.dispatch(addMessages(messages, server, to, false, next));
}
handleSocket(socket, store);

22
client/src/js/reducers/messages.js
View File

@ -1,7 +1,9 @@
import { List, Map, Record } from 'immutable';
import { createSelector } from 'reselect';
import createReducer from '../util/createReducer';
import { messageHeight } from '../util';
import * as actions from '../actions';
import { getSelectedTab } from './tab';
const Message = Record({
id: null,
@ -19,16 +21,30 @@ function addMessage(state, { server, tab, message }) {
return state.updateIn([server, tab], List(), list => list.push(new Message(message)));
}
export const getMessages = state => state.messages;
export const getSelectedMessages = createSelector(
getSelectedTab,
getMessages,
(tab, messages) => messages.getIn([tab.server, tab.name || tab.server], List())
);
export default createReducer(Map(), {
[actions.SEND_MESSAGE]: addMessage,
[actions.ADD_MESSAGE]: addMessage,
[actions.ADD_MESSAGES](state, { server, tab, messages }) {
return state.withMutations(s =>
[actions.ADD_MESSAGES](state, { server, tab, messages, prepend }) {
return state.withMutations(s => {
if (prepend) {
for (let i = messages.length - 1; i >= 0; i--) {
s.updateIn([server, tab], List(), list => list.unshift(new Message(messages[i])));
}
} else {
messages.forEach(message =>
s.updateIn([server, tab], List(), list => list.push(new Message(message)))
)
);
}
});
},
[actions.DISCONNECT](state, { server }) {

2
client/src/js/reducers/tab.js
View File

@ -19,6 +19,8 @@ const State = Record({
history: List()
});
export const getSelectedTab = state => state.tab.selected;
export default createReducer(new State(), {
[actions.SELECT_TAB](state, action) {
const tab = new Tab(action);

24
client/src/js/socket.js
View File

@ -29,25 +29,25 @@ export default function handleSocket(socket, { dispatch, getState }) {
dispatch(addMessage(message, message.server, message.from));
},
messages({ messages, server, to }) {
dispatch(addMessages(messages, server, to));
messages({ messages, server, to, prepend, next }) {
dispatch(addMessages(messages, server, to, prepend, next));
},
join(data) {
join({ user, server, channels }) {
const state = getState();
const { server, channel } = state.tab.selected;
if (server && channel) {
const { nick } = state.servers.get(server);
const [joinedChannel] = data.channels;
if (server === data.server &&
nick === data.user &&
channel !== joinedChannel &&
normalizeChannel(channel) === normalizeChannel(joinedChannel)) {
const tab = state.tab.selected;
const [joinedChannel] = channels;
if (tab.server && tab.name) {
const { nick } = state.servers.get(tab.server);
if (tab.server === server &&
nick === user &&
tab.name !== joinedChannel &&
normalizeChannel(tab.name) === normalizeChannel(joinedChannel)) {
dispatch(select(server, joinedChannel));
}
}
dispatch(inform(`${data.user} joined the channel`, data.server, data.channels[0]));
dispatch(inform(`${user} joined the channel`, server, joinedChannel));
},
servers(data) {

10
server/index_data.go
View File

@ -69,13 +69,19 @@ func getIndexData(r *http.Request, session *Session) *indexData {
}
}
messages, err := session.user.GetLastMessages(params[0], params[1], 25)
messages, hasMore, err := session.user.GetLastMessages(params[0], params[1], 50)
if err == nil && len(messages) > 0 {
data.Messages = &Messages{
m := Messages{
Server: params[0],
To: params[1],
Messages: messages,
}
if hasMore {
m.Next = messages[0].ID
}
data.Messages = &m
}
}

8
server/json.go
View File

@ -72,6 +72,8 @@ type Messages struct {
Server string `json:"server"`
To string `json:"to"`
Messages []storage.Message `json:"messages"`
Prepend bool `json:"prepend,omitempty"`
Next string `json:"next,omitempty"`
}
type Topic struct {
@ -145,6 +147,12 @@ type ClientCert struct {
Key []byte `json:"key"`
}
type FetchMessages struct {
Server string `json:"server"`
Channel string `json:"channel"`
Next string `json:"next"`
}
type Error struct {
Server string `json:"server"`
Message string `json:"message"`

34
server/websocket_handler.go
View File

@ -79,13 +79,19 @@ func (h *wsHandler) init(r *http.Request) {
Users: channelStore.GetUsers(channel.Server, channel.Name),
})
messages, err := h.session.user.GetLastMessages(channel.Server, channel.Name, 25)
messages, hasMore, err := h.session.user.GetLastMessages(channel.Server, channel.Name, 50)
if err == nil && len(messages) > 0 {
h.session.sendJSON("messages", Messages{
res := Messages{
Server: channel.Server,
To: channel.Name,
Messages: messages,
})
}
if hasMore {
res.Next = messages[0].ID
}
h.session.sendJSON("messages", res)
}
}
}
@ -271,6 +277,27 @@ func (h *wsHandler) cert(b []byte) {
h.session.sendJSON("cert_success", nil)
}
func (h *wsHandler) fetchMessages(b []byte) {
var data FetchMessages
json.Unmarshal(b, &data)
messages, hasMore, err := h.session.user.GetMessages(data.Server, data.Channel, 200, data.Next)
if err == nil && len(messages) > 0 {
res := Messages{
Server: data.Server,
To: data.Channel,
Messages: messages,
Prepend: true,
}
if hasMore {
res.Next = messages[0].ID
}
h.session.sendJSON("messages", res)
}
}
func (h *wsHandler) initHandlers() {
h.handlers = map[string]func([]byte){
"connect": h.connect,
@ -286,5 +313,6 @@ func (h *wsHandler) initHandlers() {
"raw": h.raw,
"search": h.search,
"cert": h.cert,
"fetch_messages": h.fetchMessages,
}
}

53
storage/user_messages.go
View File

@ -10,7 +10,7 @@ import (
)
type Message struct {
ID string `json:"id" bleve:"-"`
ID string `json:"-" bleve:"-"`
Server string `json:"-" bleve:"server"`
From string `json:"from" bleve:"-"`
To string `json:"-" bleve:"to"`
@ -53,8 +53,13 @@ func (u *User) LogMessage(id, server, from, to, content string) error {
return u.messageIndex.Index(id, message)
}
func (u *User) GetLastMessages(server, channel string, count int) ([]Message, error) {
func (u *User) GetLastMessages(server, channel string, count int) ([]Message, bool, error) {
return u.GetMessages(server, channel, count, "")
}
func (u *User) GetMessages(server, channel string, count int, fromID string) ([]Message, bool, error) {
messages := make([]Message, count)
hasMore := false
u.messageLog.View(func(tx *bolt.Tx) error {
b := tx.Bucket(bucketMessages).Bucket([]byte(server + ":" + channel))
@ -64,50 +69,34 @@ func (u *User) GetLastMessages(server, channel string, count int) ([]Message, er
c := b.Cursor()
for _, v := c.Last(); count > 0 && v != nil; _, v = c.Prev() {
count--
messages[count].Unmarshal(v)
}
return nil
})
if count == 0 {
return messages, nil
} else if count < len(messages) {
return messages[count:], nil
}
return nil, nil
}
func (u *User) GetMessages(server, channel string, count int, fromID string) ([]Message, error) {
messages := make([]Message, count)
u.messageLog.View(func(tx *bolt.Tx) error {
b := tx.Bucket(bucketMessages).Bucket([]byte(server + ":" + channel))
if b == nil {
return nil
}
c := b.Cursor()
if fromID != "" {
c.Seek([]byte(fromID))
for k, v := c.Prev(); count > 0 && k != nil; k, v = c.Prev() {
count--
messages[count].Unmarshal(v)
}
} else {
for k, v := c.Last(); count > 0 && k != nil; k, v = c.Prev() {
count--
messages[count].Unmarshal(v)
}
}
c.Next()
k, _ := c.Prev()
hasMore = k != nil
return nil
})
if count == 0 {
return messages, nil
return messages, hasMore, nil
} else if count < len(messages) {
return messages[count:], nil
return messages[count:], hasMore, nil
}
return nil, nil
return nil, false, nil
}
func (u *User) SearchMessages(server, channel, q string) ([]Message, error) {

29
storage/user_test.go
View File

@ -88,12 +88,14 @@ func TestMessages(t *testing.T) {
user, err := NewUser()
assert.Nil(t, err)
messages, err := user.GetMessages("irc.freenode.net", "#go-nuts", 10, "6")
messages, hasMore, err := user.GetMessages("irc.freenode.net", "#go-nuts", 10, "6")
assert.Nil(t, err)
assert.False(t, hasMore)
assert.Len(t, messages, 0)
messages, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 10)
messages, hasMore, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 10)
assert.Nil(t, err)
assert.False(t, hasMore)
assert.Len(t, messages, 0)
messages, err = user.SearchMessages("irc.freenode.net", "#go-nuts", "message")
@ -108,35 +110,40 @@ func TestMessages(t *testing.T) {
assert.Nil(t, err)
}
messages, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, ids[4])
messages, hasMore, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, ids[4])
assert.Equal(t, "message0", messages[0].Content)
assert.Equal(t, "message3", messages[3].Content)
assert.Nil(t, err)
assert.False(t, hasMore)
assert.Len(t, messages, 4)
messages, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, betterguid.New())
messages, hasMore, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, betterguid.New())
assert.Equal(t, "message0", messages[0].Content)
assert.Equal(t, "message4", messages[4].Content)
assert.Nil(t, err)
assert.False(t, hasMore)
assert.Len(t, messages, 5)
messages, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, ids[2])
messages, hasMore, err = user.GetMessages("irc.freenode.net", "#go-nuts", 10, ids[2])
assert.Equal(t, "message0", messages[0].Content)
assert.Equal(t, "message1", messages[1].Content)
assert.Nil(t, err)
assert.False(t, hasMore)
assert.Len(t, messages, 2)
messages, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 10)
messages, hasMore, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 10)
assert.Equal(t, "message0", messages[0].Content)
assert.Equal(t, "message2", messages[2].Content)
assert.Equal(t, "message4", messages[4].Content)
assert.Nil(t, err)
assert.False(t, hasMore)
assert.Len(t, messages, 5)
messages, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 3)
assert.Equal(t, "message2", messages[0].Content)
assert.Equal(t, "message4", messages[2].Content)
messages, hasMore, err = user.GetLastMessages("irc.freenode.net", "#go-nuts", 4)
assert.Equal(t, "message1", messages[0].Content)
assert.Equal(t, "message4", messages[3].Content)
assert.Nil(t, err)
assert.Len(t, messages, 3)
assert.True(t, hasMore)
assert.Len(t, messages, 4)
messages, err = user.SearchMessages("irc.freenode.net", "#go-nuts", "message")
assert.Nil(t, err)