this.addConnection()}
104 | />,
105 | ];
106 | return (
107 |
108 | }
111 | className="menu-button-item"
112 | onTouchTap={() => this.handleAddConnectionOpen()}
113 | />
114 | {items}
115 |
125 |
141 |
142 | );
143 | }
144 | }
145 |
146 | HistoryList.propTypes = {
147 | dispatch: PropTypes.func.isRequired,
148 | currentIndex: PropTypes.number.isRequired,
149 | connections: PropTypes.array.isRequired,
150 | status: PropTypes.string.isRequired,
151 | height: PropTypes.number.isRequired,
152 | };
153 |
154 | export default HistoryList;
155 |
--------------------------------------------------------------------------------
/src/components/Main.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import HistoryList from '../containers/HistoryList';
3 | import SocketPlayground from '../containers/SocketPlayground';
4 | import SocketPlaygroundBar from './SocketPlaygroundBar';
5 | import Row from './Row';
6 | import Column from './Column';
7 |
8 | const appBarHeight = 70;
9 |
10 | class AppComponent extends React.Component {
11 | constructor(props) {
12 | super(props);
13 | this.state = {
14 | listHeight: window.innerHeight - appBarHeight,
15 | };
16 | }
17 |
18 | componentDidMount() {
19 | window.addEventListener('resize', () => this.listHeight());
20 | }
21 |
22 | componentWillUnmount() {
23 | window.removeEventListener('resize', () => this.listHeight());
24 | }
25 |
26 | listHeight() {
27 | const height = window.innerHeight - appBarHeight;
28 | this.setState({
29 | listHeight: height,
30 | });
31 | }
32 |
33 | render() {
34 | return (
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | );
47 | }
48 | }
49 |
50 | export default AppComponent;
51 |
--------------------------------------------------------------------------------
/src/components/Row.js:
--------------------------------------------------------------------------------
1 | import 'flexboxgrid'; // eslint-disable-line
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | const Row = ({ className, children }) => {
6 | const elementClassName = `row ${className || ''}`;
7 | return (
8 |
9 | {children}
10 |
11 | );
12 | };
13 |
14 | Row.propTypes = {
15 | className: PropTypes.string,
16 | children: PropTypes.node.isRequired,
17 | };
18 |
19 | Row.defaultProps = {
20 | className: '',
21 | };
22 |
23 | export default Row;
24 |
--------------------------------------------------------------------------------
/src/components/SocketPlayground.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Paper from 'material-ui/Paper';
4 | import { ConnectionType } from '../constant/Constants';
5 | import SocketSetting from '../containers/SocketSetting';
6 | import SocketTerminal from '../containers/SocketTerminal';
7 | import WebSocketConnection from '../helpers/WebSocketConnection';
8 | import SocketIOConnection from '../helpers/SocketIOConnection';
9 |
10 | const webSocket = new WebSocketConnection();
11 | const socketIO = new SocketIOConnection();
12 |
13 | const SocketPlayground = ({ parameters }) => {
14 | const currentSocket = parameters.type === ConnectionType.ws ? webSocket : socketIO;
15 | return (
16 |
17 |
18 |
19 |
20 | );
21 | };
22 |
23 | SocketPlayground.propTypes = {
24 | parameters: PropTypes.object.isRequired,
25 | };
26 |
27 | export default SocketPlayground;
28 |
--------------------------------------------------------------------------------
/src/components/SocketPlaygroundBar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AppBar from 'material-ui/AppBar';
3 | import FlatButton from 'material-ui/FlatButton';
4 | import { REPOSITORY_URL } from '../constant/Constants';
5 |
6 | class SocketPlaygroundBar extends React.Component {
7 | static openRepository() {
8 | window.open(REPOSITORY_URL);
9 | }
10 |
11 | render() {
12 | const codeIcon = ;
13 | return (
14 |
19 | );
20 | }
21 | }
22 |
23 | export default SocketPlaygroundBar;
24 |
--------------------------------------------------------------------------------
/src/components/SocketSetting.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import SelectField from 'material-ui/SelectField';
4 | import TextField from 'material-ui/TextField';
5 | import RaisedButton from 'material-ui/RaisedButton';
6 | import MenuItem from 'material-ui/MenuItem';
7 | import RemoveIcon from 'material-ui/svg-icons/content/remove-circle';
8 | import { ConnectionType, ConnectionStatus } from '../constant/Constants';
9 | import { SocketContainerAction } from '../actions/ActionsType';
10 | import Row from './Row';
11 | import Column from './Column';
12 |
13 | const textFieldStyle = {
14 | width: '100%',
15 | minWidth: '100px',
16 | };
17 |
18 | class SocketSetting extends React.Component {
19 | constructor(props) {
20 | super(props);
21 | this.state = {
22 | hostErrorMessage: '',
23 | };
24 | }
25 |
26 | handleSelectChange(event, index, value) {
27 | this.props.dispatch({
28 | type: SocketContainerAction.CHANGE_CONNECTION_TYPE,
29 | value,
30 | });
31 | }
32 |
33 | handleHostChange(event) {
34 | this.setState({ hostErrorMessage: '' });
35 | this.props.dispatch({
36 | type: SocketContainerAction.CHANGE_HOST,
37 | value: event.target.value,
38 | });
39 | }
40 |
41 | handleChannelChange(event) {
42 | this.props.dispatch({
43 | type: SocketContainerAction.CHANGE_CHANNEL,
44 | value: event.target.value,
45 | });
46 | }
47 |
48 | connectToWebSocket() {
49 | const {
50 | webSocket,
51 | parameters,
52 | dispatch,
53 | status,
54 | } = this.props;
55 | const { host, channel } = parameters;
56 | if (this.props.status === ConnectionStatus.DISCONNECTED && host !== '') {
57 | webSocket.connect(host, dispatch, channel);
58 | } else if (status === ConnectionStatus.DISCONNECTED && host === '') {
59 | this.setState({ hostErrorMessage: 'This field is required' });
60 | } else {
61 | webSocket.close();
62 | }
63 | }
64 |
65 | generateChannelInput(disableChanges) {
66 | if (this.props.parameters.type === ConnectionType.io) {
67 | const channelValue = this.props.parameters.channel;
68 | return (
69 |
70 |
71 | this.handleChannelChange(event)}
76 | disabled={disableChanges}
77 | style={textFieldStyle}
78 | />
79 |
80 |
81 | );
82 | }
83 | return null;
84 | }
85 |
86 | removeConnection() {
87 | this.props.dispatch({
88 | type: SocketContainerAction.REMOVE_CONNECTION,
89 | });
90 | }
91 |
92 | render() {
93 | const connectionName = this.props.name;
94 | const connectionTypeValue = this.props.parameters.type;
95 | const hostValue = this.props.parameters.host;
96 | const disableChanges = this.props.status === ConnectionStatus.CONNECTED;
97 | const buttonLabel = this.props.status === ConnectionStatus.CONNECTED ? 'Disconnect' : 'Connect';
98 | const channelInput = this.generateChannelInput(disableChanges);
99 | const iconColor = '#aaa';
100 | let buttonOnErrorStyle = {};
101 | if (this.state.hostErrorMessage !== '') {
102 | buttonOnErrorStyle = { bottom: '35px' };
103 | }
104 | return (
105 |
106 |
107 |
108 | Websocket Settings:
109 | {connectionName}
110 | this.removeConnection()}
113 | color={iconColor}
114 | />
115 |
116 |
117 |
118 |
119 |
120 | this.handleSelectChange(event, index, value)}
125 | floatingLabelText="Connection Type"
126 | >
127 |
128 |
129 |
130 |
131 |
132 | this.handleHostChange(event)}
137 | disabled={disableChanges}
138 | errorText={this.state.hostErrorMessage}
139 | style={textFieldStyle}
140 | />
141 |
142 |
143 | this.connectToWebSocket()}
147 | />
148 |
149 |
150 | {channelInput}
151 |
152 | );
153 | }
154 | }
155 |
156 | SocketSetting.propTypes = {
157 | dispatch: PropTypes.func.isRequired,
158 | name: PropTypes.string.isRequired,
159 | parameters: PropTypes.object.isRequired,
160 | status: PropTypes.string.isRequired,
161 | webSocket: PropTypes.object.isRequired,
162 | };
163 |
164 | export default SocketSetting;
165 |
--------------------------------------------------------------------------------
/src/components/SocketTerminal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import TextField from 'material-ui/TextField';
4 | import RaisedButton from 'material-ui/RaisedButton';
5 | import SocketTerminalList from '../containers/SocketTerminalList';
6 | import { ConnectionStatus } from '../constant/Constants';
7 | import { SocketContainerAction } from '../actions/ActionsType';
8 | import Row from './Row';
9 | import Column from './Column';
10 |
11 | class SocketTerminal extends React.Component {
12 | componentDidUpdate() {
13 | const terminalComponent = this.terminalList;
14 | if (typeof terminalComponent !== 'undefined') {
15 | const terminalNode = terminalComponent.querySelector('.full-height');
16 | terminalNode.scrollTop = terminalNode.scrollHeight;
17 | }
18 | }
19 |
20 | sendMessage() {
21 | const messageInput = this.messageText.input;
22 | this.props.webSocket.send(messageInput.value);
23 | messageInput.value = '';
24 | }
25 |
26 | clearMessages() {
27 | this.props.dispatch({
28 | type: SocketContainerAction.DELETE_TERMINAL_MESSAGES,
29 | });
30 | }
31 |
32 | messageTextFieldListener(event) {
33 | if (event.keyCode === 13) {
34 | this.sendMessage();
35 | }
36 | }
37 |
38 | render() {
39 | const disableChanges = this.props.status === ConnectionStatus.DISCONNECTED;
40 | const clearDisable = this.props.terminalData.length < 1;
41 | const connectionType = this.props.parameters.type;
42 | return (
43 |
44 |
45 |
46 | { this.messageText = input; }}
48 | disabled={disableChanges}
49 | hint="Hello world"
50 | fullWidth
51 | floatingLabelText="Message"
52 | onKeyUp={event => this.messageTextFieldListener(event)}
53 | />
54 |
55 |
56 | this.sendMessage()}
61 | />
62 | this.clearMessages()}
68 | />
69 |
70 |
71 | { this.terminalList = input; }}
73 | connectionType={connectionType}
74 | terminalData={this.props.terminalData}
75 | />
76 |
77 | );
78 | }
79 | }
80 |
81 | SocketTerminal.propTypes = {
82 | dispatch: PropTypes.func.isRequired,
83 | terminalData: PropTypes.array.isRequired,
84 | parameters: PropTypes.object.isRequired,
85 | status: PropTypes.string.isRequired,
86 | webSocket: PropTypes.object.isRequired,
87 | };
88 |
89 | export default SocketTerminal;
90 |
--------------------------------------------------------------------------------
/src/components/SocketTerminalList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Row from './Row';
4 | import Column from './Column';
5 | import TerminalListItem from './TerminalListItem';
6 | import { ConnectionType } from '../constant/Constants';
7 |
8 | class SocketTerminalList extends React.Component {
9 | static createRow(messageItem) {
10 | return ;
11 | }
12 |
13 | componentDidMount() {
14 | window.addEventListener('resize', () => this.forceUpdate());
15 | }
16 |
17 | componentWillUnmount() {
18 | window.removeEventListener('resize', () => this.forceUpdate());
19 | }
20 |
21 | render() {
22 | const offset = this.props.connectionType === ConnectionType.ws ? 305 : 377;
23 | const terminalHeight = window.innerHeight - offset;
24 | const terminalStyle = { height: terminalHeight };
25 | const terminalItems = this.props.terminalData.map(messageItem => this.createRow(messageItem));
26 | return (
27 |
28 |
29 |
30 | Date:
31 |
32 |
33 | Message:
34 |
35 |
36 |
37 | {terminalItems}
38 |
39 |
11 | {dateString}
12 | {messageItem.message}
13 |
14 | );
15 | };
16 |
17 | TerminalListItem.propTypes = {
18 | messageItem: PropTypes.object.isRequired,
19 | };
20 |
21 | export default TerminalListItem;
22 |
--------------------------------------------------------------------------------
/src/config/README.md:
--------------------------------------------------------------------------------
1 | # About this folder
2 | This folder holds configuration files for different environments.
3 | You can use it to provide your app with different settings based on the
4 | current environment, e.g. to configure different API base urls depending on
5 | whether your setup runs in dev mode or is built for distribution.
6 | You can include the configuration into your code like this:
7 |
8 | ```javascript
9 | let react = require('react/addons');
10 | let config = require('config');
11 | class MyComponent extends React.Component {
12 | constructor(props) {
13 | super(props);
14 | let currentAppEnv = config.appEnv;
15 | }
16 | }
17 | ```
18 |
--------------------------------------------------------------------------------
/src/config/base.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | // Settings configured here will be merged into the final config object.
4 | export default {
5 | };
6 |
--------------------------------------------------------------------------------
/src/config/dev.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | import baseConfig from './base';
4 |
5 |
6 | const config = {
7 | appEnv: 'dev', // feel free to remove the appEnv property here
8 | };
9 |
10 | export default Object.freeze(Object.assign({}, baseConfig, config));
11 |
--------------------------------------------------------------------------------
/src/config/dist.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | import baseConfig from './base';
4 |
5 |
6 | const config = {
7 | appEnv: 'dist', // feel free to remove the appEnv property here
8 | };
9 |
10 | export default Object.freeze(Object.assign({}, baseConfig, config));
11 |
12 |
--------------------------------------------------------------------------------
/src/config/test.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | import baseConfig from './base';
4 |
5 |
6 | const config = {
7 | appEnv: 'test', // don't remove the appEnv property here
8 | };
9 |
10 | export default Object.freeze(Object.assign(baseConfig, config));
11 |
12 |
--------------------------------------------------------------------------------
/src/constant/Constants.js:
--------------------------------------------------------------------------------
1 |
2 | export const ConnectionType = {
3 | ws: 'websocket',
4 | io: 'socket.io',
5 | };
6 |
7 | export const ConnectionStatus = {
8 | CONNECTED: 'connected',
9 | DISCONNECTED: 'disconnected',
10 | };
11 |
12 | export const MessageType = {
13 | CLIENT: 'client-message',
14 | SERVER: 'server-message',
15 | ERROR: 'error-message',
16 | STATUS: 'status-message',
17 | };
18 |
19 | export const REPOSITORY_URL = 'https://github.com/williamcabrera4/chrome-app-websocket-tester';
20 |
--------------------------------------------------------------------------------
/src/containers/HistoryList.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import Helper from '../helpers/GlobalHelpers';
3 | import HistoryList from '../components/HistoryList';
4 |
5 | function mapStateToProps(state) {
6 | const stateObject = state.socketContainerReducer.toJS();
7 | const currentConnection = Helper.getCurrentConnection(state.socketContainerReducer);
8 | return {
9 | connections: stateObject.connections,
10 | currentIndex: stateObject.index,
11 | status: currentConnection.status,
12 | };
13 | }
14 |
15 | export default connect(mapStateToProps)(HistoryList);
16 |
--------------------------------------------------------------------------------
/src/containers/SocketPlayground.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import Helper from '../helpers/GlobalHelpers';
3 | import SocketPlayground from '../components/SocketPlayground';
4 |
5 | function mapStateToProps(state) {
6 | const socketState = state.socketContainerReducer;
7 | const currentConnection = Helper.getCurrentConnection(socketState);
8 | return {
9 | parameters: currentConnection.parameters,
10 | };
11 | }
12 |
13 | export default connect(mapStateToProps)(SocketPlayground);
14 |
--------------------------------------------------------------------------------
/src/containers/SocketSetting.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import Helper from '../helpers/GlobalHelpers';
3 | import SocketSetting from '../components/SocketSetting';
4 |
5 | function mapStateToProps(state) {
6 | const socketState = state.socketContainerReducer;
7 | const currentConnection = Helper.getCurrentConnection(socketState);
8 | return {
9 | name: currentConnection.name,
10 | parameters: currentConnection.parameters,
11 | status: currentConnection.status,
12 | };
13 | }
14 |
15 | export default connect(mapStateToProps)(SocketSetting);
16 |
--------------------------------------------------------------------------------
/src/containers/SocketTerminal.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import Helper from '../helpers/GlobalHelpers';
3 | import SocketTerminal from '../components/SocketTerminal';
4 |
5 | function mapStateToProps(state) {
6 | const socketState = state.socketContainerReducer;
7 | const currentConnection = Helper.getCurrentConnection(socketState);
8 | return {
9 | terminalData: currentConnection.messages,
10 | status: currentConnection.status,
11 | parameters: currentConnection.parameters,
12 | };
13 | }
14 |
15 | export default connect(mapStateToProps)(SocketTerminal);
16 |
--------------------------------------------------------------------------------
/src/containers/SocketTerminalList.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import Helper from '../helpers/GlobalHelpers';
3 | import SocketTerminalList from '../components/SocketTerminalList';
4 |
5 | function mapStateToProps(state) {
6 | const socketState = state.socketContainerReducer;
7 | const currentConnection = Helper.getCurrentConnection(socketState);
8 | return {
9 | connectionType: currentConnection.parameters.type,
10 | };
11 | }
12 |
13 | export default connect(mapStateToProps)(SocketTerminalList);
14 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/williamcabrera4/chrome-app-websocket-tester/ef678d5c73dca8be0905dc35354085e70502172c/src/favicon.ico
--------------------------------------------------------------------------------
/src/helpers/GlobalHelpers.js:
--------------------------------------------------------------------------------
1 | const getCurrentConnection = (state) => {
2 | const connections = state.get('connections');
3 | const currentIndex = state.get('index');
4 | return connections.get(currentIndex).toJS();
5 | };
6 |
7 | const formatMessage = (message) => {
8 | if (typeof message === 'object') {
9 | return JSON.stringify(message);
10 | }
11 | return message;
12 | };
13 |
14 | export default {
15 | getCurrentConnection,
16 | formatMessage,
17 | };
18 |
--------------------------------------------------------------------------------
/src/helpers/SocketIOConnection.js:
--------------------------------------------------------------------------------
1 | import * as io from 'socket.io-client';
2 | import { SocketConnectionAction } from '../actions/ActionsType';
3 | import { MessageType } from '../constant/Constants';
4 | import Helper from '../helpers/GlobalHelpers';
5 |
6 | class SocketIOConnection {
7 | connect(wsUri, dispatch, channel) {
8 | this.websocket = io.connect(wsUri);
9 | this.dispatch = dispatch;
10 | this.channel = channel;
11 | this.setListeners();
12 | }
13 |
14 | send(message) {
15 | this.websocket.emit(this.channel, message);
16 | this.dispatch({
17 | type: SocketConnectionAction.RECEIVED,
18 | value: `CLIENT: ${message}`,
19 | messageType: MessageType.CLIENT,
20 | });
21 | }
22 |
23 | setListeners() {
24 | this.websocket.on('connect', this.onOpen.bind(this));
25 | this.websocket.on('disconnect', this.onClose.bind(this));
26 | this.websocket.on(this.channel, this.onMessage.bind(this));
27 | }
28 |
29 | onOpen() {
30 | this.dispatch({
31 | type: SocketConnectionAction.CONNECTED,
32 | });
33 | this.dispatch({
34 | type: SocketConnectionAction.RECEIVED,
35 | value: 'STATUS: CONNECTED',
36 | messageType: MessageType.STATUS,
37 | });
38 | }
39 |
40 | onMessage(rawMessage) {
41 | const message = Helper.formatMessage(rawMessage);
42 | this.dispatch({
43 | type: SocketConnectionAction.RECEIVED,
44 | value: `SERVER: ${message}`,
45 | messageType: MessageType.SERVER,
46 | });
47 | }
48 |
49 | onClose() {
50 | this.dispatch({
51 | type: SocketConnectionAction.DISCONNECT,
52 | });
53 | this.dispatch({
54 | type: SocketConnectionAction.RECEIVED,
55 | value: 'STATUS: DISCONNECTED',
56 | messageType: MessageType.STATUS,
57 | });
58 | }
59 |
60 | close() {
61 | this.websocket.disconnect();
62 | }
63 | }
64 |
65 | export default SocketIOConnection;
66 |
--------------------------------------------------------------------------------
/src/helpers/StorageHelper.js:
--------------------------------------------------------------------------------
1 | import proxyStorage from './StorageProxy';
2 | import { ConnectionFunctions } from '../actions/ActionsFunction';
3 | import { ConnectionStatus } from '../constant/Constants';
4 |
5 | const stateKey = 'state';
6 |
7 | class StorageHelper {
8 | constructor(store) {
9 | this.store = store;
10 | }
11 |
12 | init() {
13 | this.store.subscribe(this.subscribeAction.bind(this));
14 | }
15 |
16 | subscribeAction() {
17 | const state = this.store.getState().socketContainerReducer;
18 | StorageHelper.saveState(state);
19 | }
20 |
21 | static saveState(state) {
22 | // Don't save the connected status
23 | const newState = ConnectionFunctions.updateConnectionStatus(
24 | state, {},
25 | ConnectionStatus.DISCONNECTED,
26 | );
27 | const stateJSON = JSON.stringify(newState);
28 | proxyStorage.setItem(stateKey, stateJSON);
29 | }
30 |
31 | static readState(callback) {
32 | proxyStorage.getItem(stateKey, callback);
33 | }
34 | }
35 |
36 | export default StorageHelper;
37 |
--------------------------------------------------------------------------------
/src/helpers/StorageProxy.js:
--------------------------------------------------------------------------------
1 | /* global chrome */
2 |
3 | const storageProxy = {
4 | setItem: () => {},
5 | getItem: () => {},
6 | };
7 |
8 | if (typeof chrome !== 'undefined' && typeof chrome.storage !== 'undefined') {
9 | storageProxy.setItem = (key, value) => {
10 | const storageObject = {};
11 | storageObject[key] = value;
12 | chrome.storage.local.set(storageObject);
13 | };
14 | storageProxy.getItem = (key, callback) => chrome.storage.local.get(key, (value) => {
15 | const stateObject = JSON.parse(value[key]);
16 | callback(stateObject);
17 | });
18 | } else if (typeof window.localStorage !== 'undefined') {
19 | storageProxy.setItem = (key, value) => window.localStorage.setItem(key, value);
20 | storageProxy.getItem = (key, callback) => {
21 | const value = window.localStorage.getItem(key);
22 | const stateObject = JSON.parse(value);
23 | callback(stateObject);
24 | };
25 | }
26 |
27 | export default storageProxy;
28 |
--------------------------------------------------------------------------------
/src/helpers/WebSocketConnection.js:
--------------------------------------------------------------------------------
1 | import { SocketConnectionAction } from '../actions/ActionsType';
2 | import { MessageType } from '../constant/Constants';
3 | import getCloseReason from './WebSocketErrorMessages';
4 | import Helper from '../helpers/GlobalHelpers';
5 |
6 | class WebSocketConnection {
7 | connect(wsUri, dispatch) {
8 | let uri = wsUri;
9 | if (!(wsUri.indexOf('ws://') === 0 || wsUri.indexOf('wss://') === 0)) {
10 | uri = `ws://${wsUri}`;
11 | }
12 | this.websocket = new WebSocket(uri);
13 | this.dispatch = dispatch;
14 | this.setListeners();
15 | }
16 |
17 | send(message) {
18 | this.websocket.send(message);
19 | this.dispatch({
20 | type: SocketConnectionAction.RECEIVED,
21 | value: `CLIENT: ${message}`,
22 | messageType: MessageType.CLIENT,
23 | });
24 | }
25 |
26 | setListeners() {
27 | this.websocket.onopen = this.onOpen.bind(this);
28 | this.websocket.onmessage = this.onMessage.bind(this);
29 | this.websocket.onclose = this.onClose.bind(this);
30 | }
31 |
32 | onOpen() {
33 | this.dispatch({
34 | type: SocketConnectionAction.CONNECTED,
35 | });
36 | this.dispatch({
37 | type: SocketConnectionAction.RECEIVED,
38 | value: 'STATUS: CONNECTED',
39 | messageType: MessageType.STATUS,
40 | });
41 | }
42 |
43 | onMessage(event) {
44 | const message = Helper.formatMessage(event.data);
45 | this.dispatch({
46 | type: SocketConnectionAction.RECEIVED,
47 | value: `SERVER: ${message}`,
48 | messageType: MessageType.SERVER,
49 | });
50 | }
51 |
52 | onClose(event) {
53 | this.dispatch({
54 | type: SocketConnectionAction.DISCONNECT,
55 | });
56 | this.dispatch({
57 | type: SocketConnectionAction.RECEIVED,
58 | value: 'STATUS: DISCONNECTED',
59 | messageType: MessageType.STATUS,
60 | });
61 | if (event.code !== 1005) {
62 | const reason = getCloseReason(event);
63 | this.dispatch({
64 | type: SocketConnectionAction.RECEIVED,
65 | value: `ERROR: ${reason}`,
66 | messageType: MessageType.ERROR,
67 | });
68 | }
69 | }
70 |
71 | close() {
72 | this.websocket.close();
73 | }
74 | }
75 |
76 | export default WebSocketConnection;
77 |
--------------------------------------------------------------------------------
/src/helpers/WebSocketErrorMessages.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | // Code from StackOverflow
4 | // Reference: http://stackoverflow.com/a/28396165/3140190
5 |
6 | // See http://tools.ietf.org/html/rfc6455#section-7.4.1
7 | export default function(event) {
8 | let reason = '';
9 | if (event.code == 1000)
10 | reason = "Normal closure, meaning that the purpose for which the connection was established has been fulfilled.";
11 | else if (event.code == 1001)
12 | reason = "An endpoint is \"going away\", such as a server going down or a browser having navigated away from a page.";
13 | else if (event.code == 1002)
14 | reason = "An endpoint is terminating the connection due to a protocol error";
15 | else if (event.code == 1003)
16 | reason = "An endpoint is terminating the connection because it has received a type of data it cannot accept (e.g., an endpoint that understands only text data MAY send this if it receives a binary message).";
17 | else if (event.code == 1004)
18 | reason = "Reserved. The specific meaning might be defined in the future.";
19 | else if (event.code == 1005)
20 | reason = "No status code was actually present.";
21 | else if (event.code == 1006)
22 | reason = "The connection was closed abnormally, e.g., without sending or receiving a Close control frame";
23 | else if (event.code == 1007)
24 | reason = "An endpoint is terminating the connection because it has received data within a message that was not consistent with the type of the message (e.g., non-UTF-8 [http://tools.ietf.org/html/rfc3629] data within a text message).";
25 | else if (event.code == 1008)
26 | reason = "An endpoint is terminating the connection because it has received a message that \"violates its policy\". This reason is given either if there is no other sutible reason, or if there is a need to hide specific details about the policy.";
27 | else if (event.code == 1009)
28 | reason = "An endpoint is terminating the connection because it has received a message that is too big for it to process.";
29 | else if (event.code == 1010) // Note that this status code is not used by the server, because it can fail the WebSocket handshake instead.
30 | reason = "An endpoint (client) is terminating the connection because it has expected the server to negotiate one or more extension, but the server didn't return them in the response message of the WebSocket handshake.
Specifically, the extensions that are needed are: " + event.reason;
31 | else if (event.code == 1011)
32 | reason = "A server is terminating the connection because it encountered an unexpected condition that prevented it from fulfilling the request.";
33 | else if (event.code == 1015)
34 | reason = "The connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified).";
35 | else
36 | reason = "Unknown reason";
37 | return reason;
38 | }
39 |
--------------------------------------------------------------------------------
/src/images/yeoman.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/williamcabrera4/chrome-app-websocket-tester/ef678d5c73dca8be0905dc35354085e70502172c/src/images/yeoman.png
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Websocket Tester
6 |
7 |
8 |
9 |
10 |
11 | Loading...
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import 'core-js/fn/object/assign';
2 | import 'normalize.css';
3 | import 'styles/App.scss'; // eslint-disable-line
4 | import injectTapEventPlugin from 'react-tap-event-plugin';
5 | import React from 'react';
6 | import ReactDOM from 'react-dom';
7 | import { Provider } from 'react-redux';
8 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
9 |
10 | import App from './components/Main';
11 | import makeStore from './stores/AppStore';
12 | import StorageHelper from './helpers/StorageHelper';
13 | import { StorageAction } from './actions/ActionsType';
14 |
15 | // Needed for onTouchTap
16 | // Can go away when react 1.0 release
17 | // Check this repo:
18 | // https://github.com/zilverline/react-tap-event-plugin
19 | injectTapEventPlugin();
20 |
21 | const store = makeStore();
22 |
23 | const storageHelper = new StorageHelper(store);
24 | storageHelper.init();
25 | StorageHelper.readState((offlineState) => {
26 | store.dispatch({ type: StorageAction.READ_OFFLINE, value: offlineState });
27 | });
28 |
29 | // Render the main component into the dom
30 | ReactDOM.render(
31 |
32 |
33 |
34 |
35 |
36 | , document.getElementById('app'),
37 | );
38 |
--------------------------------------------------------------------------------
/src/reducers/RootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import socketContainerReducer from './SocketContainerReducer';
3 |
4 | export default combineReducers({
5 | socketContainerReducer,
6 | });
7 |
--------------------------------------------------------------------------------
/src/reducers/SocketContainerReducer.js:
--------------------------------------------------------------------------------
1 | import { ConnectionStatus } from '../constant/Constants';
2 | import { SocketContainerAction, SocketConnectionAction, StorageAction }
3 | from '../actions/ActionsType';
4 | import { ConnectionFunctions, ContainerFunctions, StorageFunctions }
5 | from '../actions/ActionsFunction';
6 |
7 | export default function (state = StorageFunctions.getDefaultState(), action) {
8 | switch (action.type) {
9 | case SocketContainerAction.CHANGE_CONNECTION_TYPE:
10 | return ContainerFunctions.updateConnectionType(state, action);
11 | case SocketContainerAction.CHANGE_HOST:
12 | return ContainerFunctions.updateConnectionHost(state, action);
13 | case SocketContainerAction.CHANGE_CHANNEL:
14 | return ContainerFunctions.updateConnectionChannel(state, action);
15 | case SocketContainerAction.UPDATE_INDEX:
16 | return ContainerFunctions.updatePlaygroundIndex(state, action);
17 | case SocketContainerAction.ADD_CONNECTION:
18 | return ContainerFunctions.addConnection(state, action);
19 | case SocketContainerAction.DELETE_TERMINAL_MESSAGES:
20 | return ContainerFunctions.deleteTerminalMessages(state, action);
21 | case SocketContainerAction.REMOVE_CONNECTION:
22 | return ContainerFunctions.removeConnection(state, action);
23 |
24 | case SocketConnectionAction.CONNECTED:
25 | return ConnectionFunctions.updateConnectionStatus(state, action, ConnectionStatus.CONNECTED);
26 | case SocketConnectionAction.DISCONNECT:
27 | return ConnectionFunctions.updateConnectionStatus(
28 | state, action,
29 | ConnectionStatus.DISCONNECTED,
30 | );
31 | case SocketConnectionAction.RECEIVED:
32 | return ContainerFunctions.updateTerminalData(state, action);
33 |
34 | case StorageAction.READ_OFFLINE:
35 | return StorageFunctions.setOfflineState(state, action);
36 |
37 | default:
38 | return state;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/stores/AppStore.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux';
2 | import rootReducer from '../reducers/RootReducer';
3 |
4 | export default function makeStore() {
5 | return createStore(rootReducer);
6 | }
7 |
--------------------------------------------------------------------------------
/src/stores/README.md:
--------------------------------------------------------------------------------
1 | # About this folder
2 | This folder will hold all of your **flux** stores.
3 | You can include them into your components like this:
4 |
5 | ```javascript
6 | let react = require('react/addons');
7 | let MyStore = require('stores/MyStore');
8 | class MyComponent extends React.Component {
9 | constructor(props) {
10 | super(props);
11 | MyStore.doSomething();
12 | }
13 | }
14 | ```
15 |
--------------------------------------------------------------------------------
/src/styles/App.scss:
--------------------------------------------------------------------------------
1 | /* Base Application Styles */
2 |
3 | .error-message {
4 | color: #E91E63;
5 | }
6 |
7 | .server-message {
8 | color: #3F51B5;
9 | }
10 |
11 | .client-message {
12 | color: #FF5722;
13 | }
14 |
15 | .status-message {
16 | color: #795548;
17 | }
18 |
19 | .highlight-title {
20 | color: #795548;
21 | font-weight: 500;
22 | }
23 |
24 | .cursor-pointer {
25 | cursor: pointer;
26 | }
27 |
28 | .selectable-text {
29 | -webkit-user-select: text;
30 | cursor: text;
31 | }
32 |
33 | .selected-item {
34 | background-color: #ccc;
35 | }
36 |
37 | .full-height {
38 | overflow-y: scroll;
39 | overflow-wrap: break-word;
40 | margin-right: 1px;
41 | padding-bottom: 10px;
42 | }
43 |
44 | .full-width {
45 | width: 100%;
46 | }
47 |
48 | .padding-left-30 {
49 | padding-left: 30px;
50 | }
51 |
52 | .no-padding {
53 | padding: 0 !important;
54 | }
55 |
56 | .margin-bottom-0 {
57 | margin-bottom: 0;
58 | }
59 |
60 | .margin-left-5 {
61 | margin-left: 5px;
62 | }
63 |
64 | .margin-left-15 {
65 | margin-left: 15px;
66 | }
67 |
68 | .margin-top-15 {
69 | margin-top: 15px;
70 | }
71 |
72 | .relative-container {
73 | position: relative;
74 | }
75 |
76 | .form-bottom-element {
77 | margin-top: 25px;
78 | }
79 |
--------------------------------------------------------------------------------
/test/actions/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/williamcabrera4/chrome-app-websocket-tester/ef678d5c73dca8be0905dc35354085e70502172c/test/actions/.keep
--------------------------------------------------------------------------------
/test/components/MainTest.js:
--------------------------------------------------------------------------------
1 | /*eslint-env node, mocha */
2 | /*global expect */
3 | /*eslint no-console: 0*/
4 | 'use strict';
5 |
6 | // Uncomment the following lines to use the react test utilities
7 | // import React from 'react/addons';
8 | // const TestUtils = React.addons.TestUtils;
9 | import createComponent from 'helpers/shallowRenderHelper';
10 |
11 | import Main from 'components/Main';
12 |
13 | describe('MainComponent', () => {
14 | let MainComponent;
15 |
16 | beforeEach(() => {
17 | MainComponent = createComponent(Main);
18 | });
19 |
20 | it('should have its component name as default className', () => {
21 | expect(MainComponent.props.className).to.equal('index');
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/test/config/ConfigTest.js:
--------------------------------------------------------------------------------
1 | /*eslint-env node, mocha */
2 | /*global expect */
3 | /*eslint no-console: 0*/
4 | 'use strict';
5 |
6 | import config from 'config';
7 |
8 | describe('appEnvConfigTests', () => {
9 | it('should load app config file depending on current --env', () => {
10 | expect(config.appEnv).to.equal('test');
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/test/helpers/shallowRenderHelper.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Function to get the shallow output for a given component
3 | * As we are using phantom.js, we also need to include the fn.proto.bind shim!
4 | *
5 | * @see http://simonsmith.io/unit-testing-react-components-without-a-dom/
6 | * @author somonsmith
7 | */
8 | import React from 'react';
9 | import TestUtils from 'react-addons-test-utils';
10 |
11 | /**
12 | * Get the shallow rendered component
13 | *
14 | * @param {Object} component The component to return the output for
15 | * @param {Object} props [optional] The components properties
16 | * @param {Mixed} ...children [optional] List of children
17 | * @return {Object} Shallow rendered output
18 | */
19 | export default function createComponent(component, props = {}, ...children) {
20 | const shallowRenderer = TestUtils.createRenderer();
21 | shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
22 | return shallowRenderer.getRenderOutput();
23 | }
24 |
--------------------------------------------------------------------------------
/test/loadtests.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | require('core-js/fn/object/assign');
4 |
5 | // Add support for all files in the test directory
6 | const testsContext = require.context('.', true, /(Test\.js$)|(Helper\.js$)/);
7 | testsContext.keys().forEach(testsContext);
8 |
--------------------------------------------------------------------------------
/test/sources/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/williamcabrera4/chrome-app-websocket-tester/ef678d5c73dca8be0905dc35354085e70502172c/test/sources/.keep
--------------------------------------------------------------------------------
/test/stores/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/williamcabrera4/chrome-app-websocket-tester/ef678d5c73dca8be0905dc35354085e70502172c/test/stores/.keep
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var path = require('path');
4 | var args = require('minimist')(process.argv.slice(2));
5 |
6 | // List of allowed environments
7 | var allowedEnvs = ['dev', 'dist', 'test'];
8 |
9 | // Set the correct environment
10 | var env;
11 | if(args._.length > 0 && args._.indexOf('start') !== -1) {
12 | env = 'test';
13 | } else if (args.env) {
14 | env = args.env;
15 | } else {
16 | env = 'dev';
17 | }
18 | process.env.REACT_WEBPACK_ENV = env;
19 |
20 | // Get available configurations
21 | var configs = {
22 | base: require(path.join(__dirname, 'cfg/base')),
23 | dev: require(path.join(__dirname, 'cfg/dev')),
24 | dist: require(path.join(__dirname, 'cfg/dist')),
25 | test: require(path.join(__dirname, 'cfg/test'))
26 | };
27 |
28 | /**
29 | * Get an allowed environment
30 | * @param {String} env
31 | * @return {String}
32 | */
33 | function getValidEnv(env) {
34 | var isValid = env && env.length > 0 && allowedEnvs.indexOf(env) !== -1;
35 | return isValid ? env : 'dev';
36 | }
37 |
38 | /**
39 | * Build the webpack configuration
40 | * @param {String} env Environment to use
41 | * @return {Object} Webpack config
42 | */
43 | function buildConfig(env) {
44 | var usedEnv = getValidEnv(env);
45 | return configs[usedEnv];
46 | }
47 |
48 | module.exports = buildConfig(env);
49 |
--------------------------------------------------------------------------------