Irc-hybrid-client is an IRC web client that uses a JavaScript frontend and Node.js/Express backend.
The irc-hybrid-client supports both a light mode and dark mode. This page was done with a black background to better show the screen capture images using the dark mode color scheme. The other pages are light background to match various diagrams in the help pages.
The development and debugging were done using an iPhone and IOS Chrome Browser. The examples on this page are limited to mobile phone screen shots. However, the IRC client also works well using Chrome desktop browser on Linux. The desktop and mobile browser can be opened concurrently and will remain in sync.
After cloning the git repository, installing npm dependencies, and editing the configuration files as described in the installation section, a single user private web server can be deployed in a Linux shell.
Using a smartphone, laptop, or full size desktop display you can enter your web server login credentials to gain access to your private IRC client web server.
The green [Web] icon at the top indicates that your browser is successfully connected to the backend web server.
In this application, the web server manages the IRC server connection independently of the web browser. In this type of hybrid client, if you are temporarily disconnected, such as the smartphone screen lock, your nickname will remain present on IRC. The red [IRC] icon indicates you are disconnected from the IRC network.
The IRC Controls panel will show information to identify the currently selected IRC server configuration. Press the [Connect] button to instruct the backend web server to make a connection to the IRC network. If desired, an alternate nickname may be specified for this connection.
The Server List panel and the IRC Server edit form panel are explained with screen captures and instructions in the IRC Config page of the /docs/.
A yellow [IRC] icon indicates a connection request is in progress. The [IRC] icon will change to green to indicate that the backend web server is logged into the IRC network. The IRC Server panel may open briefly to display IRC connection status, but it will close when IRC connects.
The Join IRC Channels panel contains configurable buttons used to /JOIN IRC channels what were configured in the IRC server configuration. In this case, the "#myChannel" button will be clicked to join the #myChannel IRC channel.On this panel, the (0) icon at the top indicates the number of active IRC channel panels. Other IRC channel names may be entered ad-hoc in the input field to the left of the [Join Channel] button.
At the bottom of the panel, check boxes indicate if new channel panels should be created with audio beep sounds enabled by default. The beep sounds are configurable in each channel.
By default, hidden channel panels will auto-open themselves when a new nickname joins, the channel mode changes, or a new channel message is received. The auto-open feature of hidden panels may disabled as the default when creating new channels. This is configurable in each channel. Channels displayed as a collapsed bar will not auto-open, only hidden panels.
This screen capture image shows an IRC Channel panel viewed as it would look on an iPhone in vertical orientation.
The channel name and topic are displayed at the top of the channel window. The circle icon with transparent background and digit (2) indicates there are 2 people present in the channel. The circle icon with solid background and digit (1) indicates 1 unread message has been received in the channel while the channel panel was not the active panel. Below the title is a scrollable list of nicknames showing users present in the channel, followed by a scrollable text area where channel messages are displayed.
Multiple panels may be open simultaneously for different IRC channels. Multiple panels may be scrolled vertically. Each panel may be hidden from view using the [X] icon in the upper left. Next to this is a button with two arrows, one up and one down, which is used to collapse the channel panel to a bar.
The [Leave] button is used to issue a "/PART" command to leave the IRC channel. After leaving a new [JOIN] will become visible which may be used to re-enter the IRC channel. If there is no intention to return, a [Prune] button will become visible and it may be clicked to remove the panel and purge all channel related content from the message cache.
Should your nickname be kicked from the IRC channel, a colored "Kicked" icon will appear at the top of the channel panel. A Join button will be displayed on the channel panel which may be used to rejoin the channel, unless banned.
Clicking the text input area on an iPhone will trigger the phone to open a touch keyboard. The IRC Channel panel will scroll upwards to make room for the keyboard. On an iPhone, the microphone button on the Apple touch keyboard may be used to engage the phone voice to text features. The send button is useful during voice dictation, but pressing [Enter] or [Return] will also send messages.
A primitive auto-complete function has been added to the channel window that will include channel name and nicknames present on the channel list. The auto-complete trigger is tab character, or double space (space-space) on mobile devices. Double tab or triple space fills channel name.
Multi-line clipboard content can be sent. Paste the clipboard into the input area. A confirming dialog will open where you can press a button labeled [Send as multi-line]. This will send 1 line each 2 seconds up to 100 lines.
Pressing the [Zoom] button in the upper right of the channel window will select channel zoom mode.
Zoom mode will hide all other panels.
The number of columns and rows in the textarea elements will be adjusted to allow the channel panel to fill the screen. However, dynamic resizing is disabled during zoom due to conflicts with the popup touch keyboard. If the browser size is changed on the desktop while zoomed, un-zoom, then re-zoom again to fit the page. When not zoomed, all panels will auto-resize dynamically as needed.
If the screen width is below a minimum value, the nickname list is also hidden in zoom mode. To view the nickname list, unzoom, the re-zoom the panel.
When a channel window is in zoom mode, all other channel panels and private message panels are blocked from opening while zoom is active. Icons in the header bar will indicate the presence of unread messages in other panels as described further on at the bottom of this help page. Manually opening any other panel will cancel the zoom.
When in zoom mode, a [Zoom] icon will appear in the header bar at the top of the page. Clicking the [Zoom] icon in the header bar will also cancel the zoom.
Clicking the button with the double up/down arrows will expose a hidden section of the channel panel with additional settings.
The Inhibit-auto-scroll checkbox, when checked, will temporarily prevent the textarea element from auto-scrolling when a new message arrives. The intent of auto-scroll is position the most recent message to the bottom so it will be visible. However, auto-scrolling clears text highlighting, and this makes copying text or URL to the clipboard almost impossible during a busy conversation.
The brief checkbox changes the text format so that the message timestamp and nickname will be positioned on separate lines separated by a space. When not selected, each message will be a single line of text as shown in the next screen capture immediately below. This is intended for use on a larger display, such as a desktop monitor.
The auto-complete can be disabled if it is conflicting with the user input, such as entering multiple space characters intentionally.
The 3 checkboxes at the bottom will enable the browser to play a brief audio "beep" sound when a new message arrives, a new person joins the IRC channel, or your current nickname is mentioned in conversation. There are instruction for configuration of custom sounds in the Login Config section.
By default, hidden channel panels will auto-open when a new nickname joins, the channel mode changes, or a new channel message is received. Three checkboxes may be used to disable auto-open of hidden panels.
When the smartphone is flipped on it's side, the screen layout will adapt to the new screen width. When irc-hybrid-client is used on a desktop monitor, the format will be the same, except the display is larger.
Here you can see the alternate text format when the Brief checkbox is not checked. The two different text format schemes are selected automatically when the page loads.
The channel panel may be zoomed and un-zoomed in horizontal configuration.
The application is also capable of exchanging private messages with other users. A separate window is used for each separate private message nickname.
In this case, the (P) icon in the header bar shows an unread message has arrived. The circle icon with solid background and number (1) indicates 1 unread message has been received in the private message panel when the panel was not the active panel.
Private message panels will remain active as long as the corresponding messages are present in the message cache. The double arrow button may be used to expose additional private message settings where a [Erase All PM Panels] button can clear the cache. Clearing the cache will remove all private message panels and their messages.
DCC CHAT messaging is not supported.
The hamburger icon at the top will activate a drop down menu. Active private message panels and active IRC channel panels are dynamically added to the dropdown menu. If there are any unread messages, a number will appear inside a circle icon located to the right of the panel name showing the unread message count.
Selecting the names of the panels in the dropdown will open the panel. The panel will vertically scroll into position and the cursor will be placed in the text input area.
If multiple IRC channels are open, the Alt-N (Next) HotKey can be used to cycle between IRC channel panels. (Private message panels are not included in Alt-N.)
IRC channel panels and private message panels can be collapsed to bars using the button in each panel with the double arrow.
The [-] button at the right of the header bar will collapse all active IRC channels and private message panels to bars. If clicked a second time within 3 seconds, the active panels will toggle between hidden and collapsed bar.
HotKeys are also available for this function. Alt-B will collapse all active panels to collapsed bars. Alt-X will hide all panels.
A panel that has been collapsed into a bar will increment unread message icons when new messages arrive, but collapsed channel will not auto-open. Hidden panels will open and scroll into position when channel events occur. This behavior is summarized in the help panel. Hidden panels may be inhibited from auto-open using checkboxes in the bottom section of the channel panel.
New private message conversations can be initiated using the Private Message panel which can be opened from the dropdown menu or by using the Alt-P HotKey. From this panel, the recipient nickname and private message text can be entered. Upon submitting the message a new private message panel will be created. Optionally, there is a /WHOIS button that can be optionally used to check if the recipient is online in the IRC network before sending the message.
The round circle icon with transparent background show here with "0" indicates the count of active private message panels. In this case it is zero because no panels have been created yet. If there are any unread private messages, a second circle icon will appear with a solid background indicating the sum all all unread private messages over all private message panels.
New IRC channels may be created using the Join IRC Channels panel as described previously. This panel may be opened from the dropdown menu or using the Alt-C HotKey.
Similarly, the round circle icon with transparent background show here with "0" indicates the count of active IRC channel panels. In this case it is zero because no panels have been created yet. If there are any unread channel messages, a second circle icon will appear with a solid background indicating the sum all all unread channel messages over all channel panels.
Notice and Wallops messages are viewed in dedicated panels. These panels will remain hidden until a message arrives. The panels may be opened from the dropdown menu. Clicking activity icons in the header bar will also display the corresponding panel.
The [Erase] buttons will send a request to the web server to remove all wallops or notice messages from the wallops message cache or notice message cache.
The notice panel is used to display incoming and outgoing CTCP.
The irc-hybrid-client web server will respond to other users who submit a CTCP request for: CLIENTINFO, PING, TIME, and VERSION.
The IRC Server panel may be used to view IRC server messages. User generated channel messages and private messages will have been removed by filters and they are not shown on this panel. The IRC server panel may be opened from the dropdown menu, the Alt-S HotKey, or the (S) activity icon in the header bar.
A limited set of IRC text commands are supported. Text commands start with a slash / character. The channel panel and private message panels also support IRC text commands. The help panel (Alt-H) includes a list of supported IRC text commands.
In this example, the IRC command "/MOTD" was sent to the IRC server and the panel shows the IRC server's "Message of the day" response.
Buttons marked [Refresh] are located on several panels. The refresh feature will refresh all panels from an IRC message buffer stored in the web server. The cache is currently 100 IRC server messages per IRC channel up to 5 channels, and 100 private message (PM) messages total for all active PM. The message buffer is primarily intended to refresh after short disconnects, such as smartphone screen lock. Refreshing after a longer period of time may cause the cache buffer to exceed size limit and some older messages may be discarded.
The IRC "Lag" times displayed here represent PING measurements between the remote IRC client, located inside the web server, and the remote IRC server. Packet delay between the web browser and web server would not be included in this time measurement.
