You are viewing an inferior version of the site because your browser does not support WebP. Do upgrade to something like Chrome or Firefox. Loading websites like this causes them to require a fallback set of images and they are almost always lower quality and larger in size.

Small Widget IRC Chat for Websockets

This is a JavaScript based IRC client intended for small widget purposes where you'd like to pipe in web users without complications of the IRC protocol from your website or project. It has some basic functions, themes, saves settings and basic IRC functionality except for private messaging and multiple channels. I updated this to support IRCv3 CHATHISTORY but it's only been tested using UnrealIRCd v6+ so just keep in mind that's where I'm at with this thing and I tested it quite a few times and it was reliable. By default it is supporting 50 played back messages but you have to configure your channel to support this. Set your ircConfig block to accept ircv3 by changing the default value from 'false' to 'true'. Your channel that you wish to playback chat history you MUST set the channel mode +H like so:

/mode #channel +H 50:1440
- or -
/mode #channel +H 50:1d

This will accept 50 messages to be returned as playback and will hold the buffer of the last 24 hours. 50 played back messages is also the default in your ircConfig

2022-07-18T:00:00:00+00:00 July 19 2022 00:00:00


<link rel="stylesheet" href="/css/irc.css">

Because this isn't an iframe based IRC client you will have complete control over the client and because it's through pure websocket you won't need the backend that things like KiwiIRC required. You could change this file however you want but if you would like to keep updated with THIS release make sure to create custom CSS in another file or below the included CSS files inline as a style tag. If you have problems check your DevTools to see what classes inherited to the IRC client from your site and handle them through custom CSS..


.irc .output { font-weight:normal; }

... FOR EXAMPLE.. this IRC client would inherit something I initially set, so I've contradicted it with this rule so the IRC can still look how I intended as this site uses a bold font normally and I do not want the IRC to inherit that aspect.


<div class="irc" id="irc"></div>

This div is your target which should correspond with the target below in your ircConfig variable to setup the widget.

Configure It!

IRC Server:

Websocket Port:

Server Username:

This will configure it's essential information so it's properly changed but further customization will have to be made to the files you're creating to have it how you likely want it.


var ircConfig = {
	target:'irc',
	network:'The Change This Network Chat',
	server:'irc.yourserver.com',
	port:8000, // websocket port
	nicklen:30,
    ircv3:false,
    playback:50, // Related to IRCv3 chathistory command max privmsgs	
	channel:'#welcome',
	ident:'webuser',
	guest_prefix:'',
	max_themes:8,
	default_theme:1,
	max_video_width:'240px',
	max_image_width:'120px',
	output_height:'45vh',
	output_fc:'#d0d0d0', // font color
	input_bg:'rgb(0 0 0 / 49%)'
}

Change the configuration accordingly. You can change aspects of the ircConfig to be more dynamic by tying in functions to the values. I've tested this with UnrealIRCd 6 w/ websocket module enabled. The IRCd part will be explained below if you don't know how to do that part yet. If you intend to support IRCv3 CHATHISTORY here is where you want to pay attention to changing that 'ircv3' variable in the configuration to 'true'.


function generateIdent() {
	if(localStorage.ident) {
		return localStorage.ident;
	}
	var rident = Math.random().toString(36).substring(2,10);
	localStorage.setItem('ident',rident);
	return rident;
}

This is an example of a function you could implement to make random idents per user and have them saved in the users localStorage. You could hook any function you want to a value like this to be more specific about what kinda output becomes the value, as shown below. Even the client dimensions can be more calculated to your site layout if you tie the height value to a javascript function..


ident:generateIdent(),

.. then you can change your ircConfig to do something like this. Be sure to tune appropriately anti-random bot detectors on your network if you decide to use a method like this for the username portion of your client.


<script src="/js/irc.min.js></script>

Include this script below the rest of your client setup.

git clone https://github.com/itskrystibitch/websocketirc

For a quick setup, clone the github repository and run demo.html. Should just work. It's sitting in a standard HTML5 boilerplate template so just import it however you wish. Change the IRC information to your own and then type /help for commands once you connect to get the list of commands supported thus far.

sudo chmod go+x /etc/letsencrypt/live/ /etc/letsencrypt/archive/

sudo chown -R root:your_irc_user /etc/letsencrypt/live/irc.yourserver.com /etc/letsencrypt/archive/irc.yourserver.com/

sudo chmod -R g+r,o-rwx /etc/letsencrypt/live/irc.yourserver.com /etc/letsencrypt/archive/irc.yourserver.com/

This is how you can get UnrealIRCd to read directly your SSL certificates from LetsEncrypt's Certbot. You need this part of the setup configured before you attempt to connect to your IRCd with a websocket client like this one. It won't work on regular IRC ports like 6667 or 6697 that aren't specifically configured for websockets.


listen {
    ip *;
    port 8000;
    options {
        tls;
        websocket { type text; } 
    };
    tls-options {
        certificate "/etc/letsencrypt/live/irc.yourserver.com/fullchain.pem";
        key "/etc/letsencrypt/live/irc.yourserver.com/privkey.pem";
        options { no-client-certificate; };
    };
}

This is the websocket port you'll need for UnrealIRCd and how to read the provided certificates from Certbot. I used port 8000 throughout this project but you may change this to whatever suits you since it's controlled via the ircConfig it won't tamper with any upgrades.

Contact Krysti

GitHub:

IRC:

Direct.Me:

Ko-fi:

Photos:

E-Mail / Notify of errors:

coder [@] krysti.engineer

Please be patient contacting me, I don't really check much of social media or anything. If you use the IRC be sure to stick around because that's how IRC works, silly. :P