Jump to content

sagnik

Members
 View Profile  See their activity

  • Posts

    477

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Posts posted by sagnik

    [Solved] Question about the Johnny invitation

    in Customer Service

    Posted

    Okay, so I can create an account and  move back to Tommy at some point.

    And one more thing, I've just checked, I'm not able to do some operations (I don't remember which one) in Helionet due to my current rank, but currently I've 451 posts and I'm still a Rank I member. Previously (before the rejuvenation of Helionet, I was a Rank VII member). Is there any way to fix this?

    TypeScript Error#TS9005 while compiling JavaScript to ".d.ts"

    in Questions

    Posted

    Quote

    src/js/SGNUIKit.loader.js:29:1 - error TS9005: Declaration emit for this file requires using private name 'SGNUKConfig'. An explicit type annotation may unblock declaration emit. 

    29 const forEach = (obj, callback) => {
   ~~~~~

     

    • Here's the part of the code: 
    /**
 * Performs the specified action for each element in an object.
 *
 * @param {Object} obj
 * @param {(value:any, key:string)=>void} callback A function that accepts up to three arguments. forEach calls the <b><i>callback</i></b> function one time for each element in the object.
 */
const forEach = (obj, callback) => {
	let value;
	//context = context || this;  //apply the function to 'this' by default

	for(const key in obj) {
		if(key !== 'length' && obj.hasOwnProperty(key)) {  //to rule out inherited properties
			value = obj[key];
			if(typeof callback === 'function')
				callback(value, key);
		}
	}
}

/**
 * Appends new elements to the end of an object, and returns the new length of the object.
 * @param {Object} obj
 * @param {...any} items New elements to add to the object.
 */
const push = (obj, ...items) => {
	let k = obj.length || 0;

	items.forEach((value) => {
		obj[k] = value;
		k++;
		obj.length = k;
	});
}

const SGNUIKit = {
	isReady: false,
	isInit: false,
	isPreloaderHeld: false,
	configs: {
		'urls': {
			'api': {
				'geonames': 'https://secure.geonames.org/',
				'osm': 'https://nominatim.openstreetmap.org/'
			},
		},
		'api': {
			'geonames': '' //username
		},
		'geocoding': {
			'defaultAPI': 'osm'
		}
	},
	components: {},
	onChangeListener: {},
	onInitListener: {},
	onReadyListener: {},
	callCounts: {
		'init': 0,
		'ready': 0,
		'config': 0,
		'component': 0,
		'holdPreloader': 0,
	},

	/**
	 * This callback is called when a component is loaded/removed or the status of readiness is changed.
	 *
	 * @callback SGNUIKitChangeCallback
	 * @param {string} state The name of the state which is changed.
	 * @param {boolean|JSON} value The value of the state which is changed.
	 * @param {JSON} components The <b><i>JSON</i></b> object of loaded <b>SGNUIKit</b> components, or an empty <b><i>JSON</i></b> object if no components loaded.
	 */
	/**
	 * This callback is called when <b>SGNUIKit</b> is ready.
	 *
	 * @callback SGNUIKitReadyCallback
	 * @param {boolean} isReady the status of readiness of <b>SGNUIKit</b>.
	 */

	/**
	 * Add a loaded <b>SGNUIKit</b> component.
	 *
	 * @param {{}} config The <b><i>JSON</i></b> object of the <b>SGNUIKit</b> configuration options.
	 */
	set config(config) {
		if(config !== undefined && config !== null && config !== "") {
			this.configs = new SGNUKConfig(config);
			this.callCounts.config++;

			forEach(this.onChangeListener, (listener) => listener("config", config, this.configs));
		}
	},

	/**
	 * Get the list of loaded <b>SGNUIKit</b> components.
	 *
	 * @return {Object} The <b><i>JSON</i></b> object of loaded <b>SGNUIKit</b> components, or an empty <b><i>JSON</i></b> object if no components loaded.
	 */
	get config() {
		return this.configs;
	},

	/**
	 * Add a loaded <b>SGNUIKit</b> component.
	 *
	 * @param {{}} value The <b><i>JSON</i></b> object of the loaded <b>SGNUIKit</b> component.
	 */
	set component(value) {
		if(value !== undefined && value !== null && value !== "") {
			Object.assign(this.components, value);
			this.callCounts.component++;

			forEach(this.onChangeListener, (listener) => listener("components", value, this.components));
			//this.onChangeListener.forEach((listener) => listener("components", value, this.components));
		}
	},

	/**
	 * Get the list of loaded <b>SGNUIKit</b> components.
	 *
	 * @return {object} The <b><i>JSON</i></b> object of loaded <b>SGNUIKit</b> components, or an empty <b><i>JSON</i></b> object if no components loaded.
	 */
	get component() {
		return this.components;
	},

	/**
	 * Check if a <b>SGNUIKit</b> component is loaded.
	 *
	 * @param {string|number} id The <i>ID</i> of the <b>SGNUIKit</b> component to check.
	 */
	isComponentLoaded: function(id) {
		return this.components.hasOwnProperty(id);
	},

	/**
	 * Set the status of readiness of <b>SGNUIKit</b>.
	 *
	 * @param {boolean} isInit The the status of readiness of <b>SGNUIKit</b>.
	 */
	set init(isInit) {
		this.isInit = isInit;
		this.callCounts.init++;
		forEach(this.onChangeListener, (listener) => listener("init", this.isInit));

		if(isInit)
			forEach(this.onInitListener, (listener) => listener(isInit));
	},

	/**
	 * Get the status of readiness of <b>SGNUIKit</b>.
	 *
	 * @return {boolean} <b><i>TRUE</i></b> if <b>SGNUIKit</b> is ready, <b><i>FALSE</i></b> otherwise.
	 */
	get init() {
		return this.isInit;
	},

	/**
	 * Set the status of readiness of <b>SGNUIKit</b>.
	 *
	 * @param {boolean} isReady The the status of readiness of <b>SGNUIKit</b>.
	 */
	set ready(isReady) {
		this.isReady = isReady;
		this.callCounts.ready++;
		forEach(this.onChangeListener, (listener) => listener("ready", this.isReady));
		//this.onChangeListener.forEach((listener) => listener("ready", this.isReady));

		if(isReady)
			forEach(this.onReadyListener, (listener) => listener(isReady));
		//this.onReadyListener.forEach((listener) => listener(isReady));
	},

	/**
	 * Get the status of readiness of <b>SGNUIKit</b>.
	 *
	 * @return {boolean} <b><i>TRUE</i></b> if <b>SGNUIKit</b> is ready, <b><i>FALSE</i></b> otherwise.
	 */
	get ready() {
		return this.isReady;
	},

	/**
	 * Hold the <b>SGNUIKit</b> preloader even after  <b>SGNUIKit</b> has finished loading the components.
	 *
	 * @param {boolean} hold The the status of readiness of <b>SGNUIKit</b>.
	 */
	set holdPreloader(hold) {
		this.isPreloaderHeld = hold;
		this.callCounts.holdPreloader++;
		forEach(this.onChangeListener, (listener) => listener("holdPreloader", this.isPreloaderHeld));
		//this.onChangeListener.forEach((listener) => listener("holdPreloader", this.isPreloaderHeld));
	},

	/**
	 * Get the status of readiness of <b>SGNUIKit</b>.
	 *
	 * @return {boolean} <b><i>TRUE</i></b> if <b>SGNUIKit</b> is ready, <b><i>FALSE</i></b> otherwise.
	 */
	get holdPreloader() {
		return this.isPreloaderHeld;
	},

	/**
	 * Set the handler for <b>SGNUIKit</b> <b><i>OnChange</i></b> event, which will be triggered when a component is loaded/removed or the status of readiness is changed.
	 *
	 * @param {SGNUIKitChangeCallback}listener
	 * @param {string|number}[id=undefined]
	 */
	setOnChangeListener: function(listener, id) {
		if(typeof id !== 'string' || $.isNumeric(id))
			this.onChangeListener[id] = listener;
		else
			push(this.onChangeListener, listener);
	},

	/**
	 * Set the handler for <b>SGNUIKit</b> <b><i>OnReady</i></b> event, which will be triggered when the <b>SGNUIKit</b> is ready.
	 *
	 * @param {SGNUIKitReadyCallback}listener
	 * @param {string|number}[id=undefined]
	 */
	setOnInitListener: function(listener, id) {
		if(typeof id !== 'string' || $.isNumeric(id))
			this.onInitListener[id] = listener;
		else
			push(this.onInitListener, listener);

		if(this.init)
			forEach(this.onInitListener, (listener) => listener(this.isInit));
	},

	/**
	 * Set the handler for <b>SGNUIKit</b> <b><i>OnReady</i></b> event, which will be triggered when the <b>SGNUIKit</b> is ready.
	 *
	 * @param {SGNUIKitReadyCallback}listener
	 * @param {string|number}[id=undefined]
	 */
	setOnReadyListener: function(listener, id) {
		if(typeof id !== 'string' || $.isNumeric(id))
			this.onReadyListener[id] = listener;
		else
			push(this.onReadyListener, listener);

		if(this.ready)
			forEach(this.onReadyListener, (listener) => listener(this.isReady));
		//this.onReadyListener.forEach((listener) => listener(this.ready));
	},
};
window.SGNUIKit = SGNUIKit;

if(typeof jQuery === 'undefined') {
  // EMBED JQUERY
}

/***
 * @return {SGNUKConfig}
 */
const SGNUKConfig = function(config) {
	const plugin = this;
	const _defaults = {
		'urls': {
			'api': {
				'geonames': 'https://secure.geonames.org/',
				'osm': 'https://nominatim.openstreetmap.org/'
			},
		}
	}
	plugin.config = {
		'api': {
			'geonames': undefined //username
		},
		'geocoding': {
			'defaultAPI': 'osm'
		}
	}

	const init = () => {
		plugin.config = Object.assign(plugin.config, config);
		plugin.config = Object.assign(plugin.config, _defaults);
	}

	init();

	return plugin;
};

((callback) => {
	const head  = document.head || document.getElementsByTagName("head")[0],
	      style = document.createElement("style");
	const currentScript = document.currentScript || document.querySelector("script[src*=\"SGNUIKit.loader.js\"]");
	let preloader = `\t\t\t<div class="preloader">\n`;
	//OTHER CODES HERE

	head.appendChild(style);

	preloaderElem.innerHTML = preloader;

	window.onload = function() {
		document.body.classList.add("has-preloader");
		document.body.insertBefore(preloaderElem, document.body.firstChild);

		if(typeof callback === 'function')
			callback();
	};
})(() => {
	(async precallback => {
		const title = document.title;
		if(title !== undefined)
			document.title = "Loading...";

		if(window.jQuery)
			$.holdReady(true);
      	//OTHER CODES HERE
		async function finishLoad() {
			progress = (filestoload > 0) ? Math.round((filesloaded * 100) / filestoload) : 100;

			await new Promise(resolve => {
				if(filesloaded >= filestoload) {
					resolve();
				}
			}).then(function() {
				document.querySelector('head > title').innerHTML = title;
				if(typeof precallback === "function" && progress === 100)
					precallback();
			});
		}
    })(function() {
		(async callback => {
			(() => {
				const startLoad = new Promise(async function(resolve) {
					await loadStyle(0);
					await loadScript(0);
					if(loaded === total)
						resolve();
				});

				startLoad.then(() => {
					finishLoad();
				});
			})();
			async function finishLoad() {
				const progress = Math.round((loaded * 100) / total);

				await new Promise(resolve => {
					if(loaded === total) {
						resolve();
					}
				}).then(function() {
					if(typeof callback === "function")
						callback(loaded, total, progress);
				});
			}
		})((loaded, total, progress) => {
			if(progress === 100) {
				SGNUIKit.init = true;

				const styles = document.querySelector("style#sgn-uikit-styles");
				const left = document.querySelector("style[data-cke=\"true\"]");
				if(left !== null)
					left.parentNode.removeChild(left);
				if(styles !== null)
					styles.parentNode.removeChild(styles);

				$.holdReady(false);
				jQuery.ready();
			}
		});
	});
	(() => {
		SGNUIKit.setOnChangeListener((prop, value) => {
			if(prop === 'holdPreloader') {
				if(SGNUIKit.init && !value) {
					finalize(true);
				}
			} else {
				if(prop === 'init' && value) {
					finalize(false);
				}
			}
		}, 'sgn-uk-prop-change-listener');
	})();
});

     

    • tsconfig.json 
    {
	"include": [
		//"./src/addons/*.js",
		"./src/js/*.js"
	],
	"compilerOptions": {
		"outDir": "./dist/lib",
		"declarationDir": "dist/types",
		"target": "ES6",
		"module": "ES6",
		"moduleResolution": "Classic",
		"strictPropertyInitialization": false,
		"esModuleInterop": true,
		"noImplicitAny": true,
		"noImplicitReturns": true,
		"noImplicitThis": true,
		"allowSyntheticDefaultImports": true,
		"removeComments": true,
		"allowJs": true,
		"checkJs": true,
		"strict": false,
		"skipLibCheck": true,
		"allowUmdGlobalAccess": true,
		"alwaysStrict": true,
		"useDefineForClassFields": true,
		// Generate d.ts files
		"declaration": true,
		// only output d.ts files
		"emitDeclarationOnly": true,
		"declarationMap": true,
		//"types": [],
		"typeRoots": [
			"./src/types"
		]
	},
	"exclude": [
		"node_modules",
		"./node_modules",
		"./node_modules/*",
		"./node_modules/@types/node/index.d.ts",
		".backup",
		".github",
		"build",
		"demos",
		"dist",
		"docs",
		"release"
	]
}

     

    Sorting a multi-dimentional array of Hexadecimal/HSL colors based on shade/group (from black to white)

    in Website Management and Coding

    Posted

    Hi, I'm trying to sort an array of colors based on their group/category. But, unfortunately, the sorted colors are not linear. So here's some codes for your reference.

    • Function: sortColors: 
    function sortColors($colors) {
    $s = $hue = $sat = $val = $final = [];

    foreach($colors as $k => $info) {
            $color = $info['hex'];
            $hex = strtolower(str_replace('#', '', $color));
            $info['hex'] = $hex;
            $colors[$k] = $info;

            list($r, $g, $b) = str_split($hex, 2);
            $r = hexdec($r);
            $g = hexdec($g);
            $b = hexdec($b);

            //$s[$k] = rgbtohsv($r, $g, $b);
            $s[$k] = rgbToHsl($r, $g, $b);

            $info['hex'] = "#$hex";
    }

    //Split each array up into H, S and V arrays
    foreach($s as $k => $v) {
        $hue[$k] = $v['h'];
        $sat[$k] = $v['s'];
        $val[$k] = $v['l'];
        //$val[$k] = $v['v'];
    }

    $r = $s;
    $keys = array_keys($r);
    uasort(
        $r,
        function($a, $b) {
            if(!huesAreinSameInterval($a['h'],$b['h'])){
               if ($a['h'] < $b['h'])
                   return -1;
               if ($a['h'] > $b['h'])
                   return 1;
            }
            if ($a['s'] < $b['s'])
                 return -1;
            if ($a['s'] > $b['s'])
                  return 1;
            if ($a['l'] < $b['l'])
                return 1;
            if ($a['l'] > $b['l'])
                return -1;
            return 0;
        }
    );

    $i = 0;
	foreach($r as $k => $hsv) {
	    $info = $colors[$k];
	    $hex = $info['hex'];
	    $info['hex'] = "#$hex";
	    $info['hsv'] = $hsv;

	    $final[] = $info;

	    $i++;
	}

	return $final;
}

     

    • Input Array of Colors: 
    Array
(
    [0] => Array
        (
            [name] => Black
            [hex] => #000000
        )

    [1] => Array
        (
            [name] => White
            [hex] => #FFFFFF
        )

    [2] => Array
        (
            [name] => Red
            [hex] => #FF0000
        )

    [3] => Array
        (
            [name] => Red Devil
            [hex] => #860111
        )

    [4] => Array
        (
            [name] => Pink
            [hex] => #FFC0CB
        )

    [5] => Array
        (
            [name] => Blue
            [hex] => #0000FF
        )

    [6] => Array
        (
            [name] => Lavender Blue
            [hex] => #CCCCFF
        )

    [7] => Array
        (
            [name] => Mint Green
            [hex] => #98FF98
        )

    [8] => Array
        (
            [name] => Lincoln Green
            [hex] => #195905
        )

    [9] => Array
        (
            [name] => Electric Yellow
            [hex] => #FFFF33
        )

)

     

    • Output of the Sorted Array: 
    Array
(
    [0] => Array
        (
            [name] => White
            [hex] => #ffffff
            [rgb] => Array
                (
                    [r] => 255
                    [g] => 255
                    [b] => 255
                )

            [hsl] => Array
                (
                    [h] => 0
                    [s] => 0
                    [l] => 1
                )

            [hsv] => Array
                (
                    [h] => 0
                    [s] => 0
                    [l] => 1
                )

        )

    [1] => Array
        (
            [name] => Black
            [hex] => #000000
            [rgb] => Array
                (
                    [r] => 0
                    [g] => 0
                    [b] => 0
                )

            [hsl] => Array
                (
                    [h] => 0
                    [s] => 0
                    [l] => 0
                )

            [hsv] => Array
                (
                    [h] => 0
                    [s] => 0
                    [l] => 0
                )

        )

    [2] => Array
        (
            [name] => Red
            [hex] => #ff0000
            [rgb] => Array
                (
                    [r] => 255
                    [g] => 0
                    [b] => 0
                )

            [hsl] => Array
                (
                    [h] => 0
                    [s] => 1
                    [l] => 0.5
                )

            [hsv] => Array
                (
                    [h] => 0
                    [s] => 1
                    [l] => 0.5
                )

        )

    [3] => Array
        (
            [name] => Electric Yellow
            [hex] => #ffff33
            [rgb] => Array
                (
                    [r] => 255
                    [g] => 255
                    [b] => 51
                )

            [hsl] => Array
                (
                    [h] => 60
                    [s] => 1
                    [l] => 0.6
                )

            [hsv] => Array
                (
                    [h] => 60
                    [s] => 1
                    [l] => 0.6
                )

        )

    [4] => Array
        (
            [name] => Lincoln Green
            [hex] => #195905
            [rgb] => Array
                (
                    [r] => 25
                    [g] => 89
                    [b] => 5
                )

            [hsl] => Array
                (
                    [h] => 105.71429
                    [s] => 0.89362
                    [l] => 0.18431
                )

            [hsv] => Array
                (
                    [h] => 105.71429
                    [s] => 0.89362
                    [l] => 0.18431
                )

        )

    [5] => Array
        (
            [name] => Mint Green
            [hex] => #98ff98
            [rgb] => Array
                (
                    [r] => 152
                    [g] => 255
                    [b] => 152
                )

            [hsl] => Array
                (
                    [h] => 120
                    [s] => 1
                    [l] => 0.79804
                )

            [hsv] => Array
                (
                    [h] => 120
                    [s] => 1
                    [l] => 0.79804
                )

        )

    [6] => Array
        (
            [name] => Lavender Blue
            [hex] => #ccccff
            [rgb] => Array
                (
                    [r] => 204
                    [g] => 204
                    [b] => 255
                )

            [hsl] => Array
                (
                    [h] => 240
                    [s] => 1
                    [l] => 0.9
                )

            [hsv] => Array
                (
                    [h] => 240
                    [s] => 1
                    [l] => 0.9
                )

        )

    [7] => Array
        (
            [name] => Blue
            [hex] => #0000ff
            [rgb] => Array
                (
                    [r] => 0
                    [g] => 0
                    [b] => 255
                )

            [hsl] => Array
                (
                    [h] => 240
                    [s] => 1
                    [l] => 0.5
                )

            [hsv] => Array
                (
                    [h] => 240
                    [s] => 1
                    [l] => 0.5
                )

        )

    [8] => Array
        (
            [name] => Red Devil
            [hex] => #860111
            [rgb] => Array
                (
                    [r] => 134
                    [g] => 1
                    [b] => 17
                )

            [hsl] => Array
                (
                    [h] => 352.78195
                    [s] => 0.98519
                    [l] => 0.26471
                )

            [hsv] => Array
                (
                    [h] => 352.78195
                    [s] => 0.98519
                    [l] => 0.26471
                )

        )

    [9] => Array
        (
            [name] => Pink
            [hex] => #ffc0cb
            [rgb] => Array
                (
                    [r] => 255
                    [g] => 192
                    [b] => 203
                )

            [hsl] => Array
                (
                    [h] => 349.52381
                    [s] => 1
                    [l] => 0.87647
                )

            [hsv] => Array
                (
                    [h] => 349.52381
                    [s] => 1
                    [l] => 0.87647
                )

        )

)

    image.thumb.png.f9d9bd579971dcffd4b51d80cfb4fba4.png

    Any help will be appreciated. Thank you.

    Any suggestions on how can I convert questions into answers in PHP

    in Website Management and Coding

    Posted

    Hi once again. As some of you might know that I'm currently working on a Machine Learning project in PHP, so I've already asked for help with drawing charts using the PHP GD library and I'm glad to let you know that the problem has been solved. But now I've got another problem (maybe I couldn't understand the logic). So let me describe the problem, as I've finished the basics of a Machine Learning library (Maths, Statistics & Charts), I've started to build the Natural Language Processing (NLP) module, I wouldn't say that the module is not working but not as expected. I've created a bot with a corpus about "Chatbots (from Wikipedia)" to test the module and the bot is replying very well but not as expected and I think I know why, because I couldn't add Grammars & Lemmatization so when I ask the bot something like (who is the created the Chatbots?, what chatbots do?, etc.) it's not replying with a proper answer instead its replying based on the algorithm I've used which is "TFIDF Vector" & "Cosine Similarity" so if I send first 1 or more words it is replying with the sentence that starts with the word(s) I've sent. So basically it's unaware of answering the question formally. And about Lemmatization I'm using the "Lemmatizer by WriteCrow - based on the WordNet project by Princeton University" but I couldn't find a way to implement it and even I don't know if after implementing Lemmatization it will fix the problem or not but it worths a try. So I need a way to implement the feature. If anyone knows anything about it, it'll be a great help for me and obviously I'll get into more troubles when I progress through the project and if anyone would like to contribute/collaborate with me you can reply in this post or PM me.

    Problems drawing images with PHP GD

    in Website Management and Coding

    Posted

    I understand but I want it to be solely based on PHP. It would be better if I could do it without any dependencies. And I'm trying to avoid any type of client-side scripts for now. But I'll do it for sure in the future.

    The project I'm currently working on is "PHPML" which is a PHP implementation of some Python Machine Learning libraries (like NumPy, scipy, matplotlib, NLP, etc.) as the project is currently under development I don't want to mess with client-side. I want the users to just import one PHP Script on a page and access all the libraries.

    But in the future if it becomes a need to include some javascripts for any reason I lok into it but for now I want to stick with PHP GD (if possible).

    Problems drawing images with PHP GD

    in Website Management and Coding

    Posted

    Hello again, I've got a problem with PHP GD. The problem is I'm trying to draw charts (i.e.Bar) and I'm trying to draw the Bell Curve of a data or an array with "Normal Distribution", but the problem is the chart is not fitting inside the allocated image size (1920 x 1080) so the chart is exceeding the boundaries of the image. So I've just tried a library "JpGraph" it works very well but doesn't fit my requirements, so I saw that the library is using some kind of canvas to draw the chart and then merging the image with the original one and I'm trying to do the same but I couldn't understand how. Please help me out, it's very urgent, I've to finish the project within a week.

     

    public function histogram(array $samples, int $bins, string $heading = null, string $xAxisHeading = null, string $yAxisHeading = null) {
		if(is_array($samples)) {
			$data = $_bins = $this->calculateBins($samples, $bins);
			/*
			 * Chart settings and create image
			 */

			// Margin between label and axis
			$labelMargin = 8;

			$count = count($samples);

			// Max value on y-axis
			$yMaxValue = max(array_column($data, 'count'));
			if($yMaxValue % 2 == 1)
				$yMaxValue++;
			// Distance between grid lines on y-axis
			$yLabelSpan = ceil($yMaxValue / $bins);
			$t1 = ($yLabelSpan * $bins);
			if($t1 > $yMaxValue)
				$yMaxValue = $t1;

			// Bar and line width
			$lineWidth = 1;
			$barWidth = 20;

			// Image dimensions
			$imageWidthActual = round(count($data) * $barWidth * ($labelMargin / 2));
			$imageHeightActual = round((count($data) / 2) * $count / 2);
			$imageWidth = min(1920, $imageWidthActual);
			$imageHeight = min(1024, $imageHeightActual);

			// Grid dimensions and placement within image
			$gridTop = 40;
			$gridBottom = round(($imageHeight - $gridTop));
			$gridLeft = 50;
			$gridRight = round(($imageWidth - $gridLeft));
			$gridHeight = $gridBottom - $gridTop;
			$gridWidth = $gridRight - $gridLeft;

			// Bar space
			$barSpacing = $gridWidth / count($data);

			// Font settings
			$font = PHPML_ROOT.'assets/fonts/OpenSans-Regular.ttf';
			$headingFont = PHPML_ROOT.'assets/fonts/OpenSans-Bold.ttf';
			$fontSize = 10;
			$headingFontSize = 12;

			// Init image
			$chart = imagecreatetruecolor($imageWidth, $imageHeight);

			// Setup colors
			$backgroundColor = imagecolorallocate($chart, 255, 255, 255);
			$headingColor = imagecolorallocate($chart, 0, 0, 0);
			$axisColor = imagecolorallocate($chart, 85, 85, 85);
			$gridColor = imagecolorallocate($chart, 212, 212, 212);
			//$barColor = imagecolorallocate($chart, 47, 133, 217);
			$labelColor = $axisColor;

			imagefill($chart, 0, 0, $backgroundColor);
			imagesetthickness($chart, $lineWidth);

			/*
			 * Print grid lines bottom up and Y-Labels
             */
			for($i = 0; $i <= $yMaxValue; $i += $yLabelSpan) {
				$y = $gridBottom - $i * $gridHeight / $yMaxValue;

				// draw the line
				imageline($chart, $gridLeft, $y, $gridRight, $y, $gridColor);

				// draw right aligned label
				$labelBox = imagettfbbox($fontSize, 0, $font, strval($i));
				$labelWidth = $labelBox[4] - $labelBox[0];

				$labelX = $gridLeft - $labelWidth - $labelMargin;
				$labelY = $y + $fontSize / 2;

				imagettftext($chart, $fontSize, 0, $labelX, $labelY, $labelColor, $font, strval($i));
			}

			/*
			 * Draw x- and y-axis
             */
			imageline($chart, $gridLeft, $gridTop, $gridLeft, $gridBottom, $axisColor); //Left
			//imageline($chart, $gridRight, $gridTop, $gridRight, $gridBottom, $axisColor); //Right
			//imageline($chart, $gridLeft, $gridTop, $gridRight, $gridTop, $axisColor); //Top
			imageline($chart, $gridLeft, $gridBottom, $gridRight, $gridBottom, $axisColor); //Bottom

			$headingBox = $this->getTextBoundingBox($chart, $headingFontSize, $headingFont, strval($heading), 0);
			$xAxisHeadingBox = $this->getTextBoundingBox($chart, $fontSize, $font, strval($xAxisHeading), 0);
			$yAxisHeadingBox = $this->getTextBoundingBox($chart, $fontSize, $font, strval($yAxisHeading), 90);

			if(!empty($heading))
				imagettftext($chart, $headingFontSize, 0, $headingBox['x']['center'], $headingBox['y']['top'], $headingColor, $headingFont, $heading);
			if(!empty($xAxisHeading))
				imagettftext($chart, $fontSize, 0, $xAxisHeadingBox['x']['center'], $xAxisHeadingBox['y']['bottom'], $headingColor, $font, $xAxisHeading);
			if(!empty($yAxisHeading))
				imagettftext($chart, $fontSize, 90, $yAxisHeadingBox['x']['left'], $yAxisHeadingBox['y']['middle'], $headingColor, $font, $yAxisHeading);

			/*
			 * Draw the bars with X-labels
             */
			$itemX = $gridLeft + $barSpacing / 2;
			$canvasWidth = ($imageWidth * 2);
			$canvasHeight = ($imageHeight * 2);
			$canvas = imagecreatetruecolor($canvasWidth, $canvasHeight);
			$canvasBackgroundColor = imagecolorallocate($canvas, 255, 255, 255);
			$labelColor = imagecolorallocate($canvas, 85, 85, 85);
			$barColor = imagecolorallocate($canvas, 47, 133, 217);
			imagefill($canvas, 0, 0, $canvasBackgroundColor);
			foreach($data as $key => $bin) {
				// Draw the label
				$labelBox = imagettfbbox($fontSize, 0, $font, $key);
				$labelWidth = $labelBox[4] - $labelBox[0];
				$labelX = $itemX - $labelWidth / 2;
				$labelY = $gridBottom + $labelMargin + $fontSize;
				imagettftext($canvas, $fontSize, 0, $labelX, $labelY, $labelColor, $font, $key);
				foreach($bin as $k=>$value) {
					// Draw the bar
					$x1 = $itemX - $barWidth / 2;
					$y1 = $gridBottom - $value / $yMaxValue * $gridHeight;
					$x2 = $itemX + $barWidth / 2;
					$y2 = $gridBottom - 1;
					imagefilledrectangle($canvas, $x1, $y1, $x2, $y2, $barColor);
				}
				$itemX += $barSpacing;
			}
			$resized = $this->resize($canvas, $imageWidth, $imageHeight);
			imagealphablending($canvas, false);
			imagesavealpha($canvas, true);
			//imagecopyresampled($chart, $canvas, 0, 0, 0, 0, $canvasWidth, $canvasHeight, $imageWidth, $imageHeight);
			imagecopymerge($chart, $resized, 0, 0, 0, 0, $canvasWidth, $canvasHeight, 100);
			//imagecopyresized($chart, $canvas, 10, 10, 0, 0, $canvasWidth, $canvasHeight, $imageWidth, $imageHeight);
			/*
			 *  Output image to browser
             */
			//header('Content-Type: image/png');
			ob_start();
			imagepng($chart);
			$outBlob = ob_get_contents();
			ob_end_clean();
			imagedestroy($canvas);
			imagedestroy($chart);
			$outImg = "data: image/png;base64,".base64_encode($outBlob);
			/*
			 * Output image to file
             */
			//imagepng($chart, 'chart.png');
			return $outImg;
		}
		return false;
	}

    Creating and connecting to Secure WebSockets in same IP

    in Website Management and Coding

    Posted

    Okay, so finally I've solved the problem. What I did is, changed the virtual-ssl-host configuration and httpd.conf. Here is the new configurations:

     

    httpd-ahssl.conf/httpd-ssl.conf:

    <VirtualHost _default_:443>
	SSLEngine on
	ServerName localhost:443
	SSLCertificateFile "${SRVROOT}/conf/ssl/localhost.crt"
	SSLCertificateKeyFile "${SRVROOT}/conf/ssl/localhost.pem"
	DocumentRoot "${SRVROOT}/htdocs"
	# DocumentRoot access handled globally in httpd.conf
	CustomLog "${SRVROOT}/logs/ssl_request.log" \
          "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
	<Directory "${SRVROOT}/htdocs">
		Options Indexes Includes FollowSymLinks
		AllowOverride AuthConfig Limit FileInfo
		Require all granted
	</Directory>
	SSLProxyEngine on
	ProxyPass /ws/ ws://localhost:9000
	ProxyPassReverse /ws/ ws://localhost:9000
	ProxyRequests off
</VirtualHost>

<VirtualHost 192.168.1.201:443>
	DocumentRoot "${SRVROOT}/htdocs"
	ServerName 192.168.1.201
	SSLEngine on
	#SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL
	SSLCipherSuite ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:DHE-RSA-AES128-SHA
	SSLCertificateFile "${SRVROOT}/conf/ssl/localhost.crt"
	SSLCertificateKeyFile "${SRVROOT}/conf/ssl/localhost.pem"
	SSLCertificateChainFile "${SRVROOT}/conf/ssl/ca-chain.pem"
	#SSLProxyCACertificateFile "${SRVROOT}/conf/ssl/localhost.crt"
	SSLProxyEngine on
	#SSLProxyVerify none
	#SSLProxyCheckPeerCN off
	#SSLProxyCheckPeerName off
	ProxyPass /ws/ ws://192.168.1.201:9000
	ProxyPassReverse /ws/ ws://192.168.1.201:9000
	ProxyRequests off
	ErrorLog "${SRVROOT}/logs/error.log"
	CustomLog "${SRVROOT}/logs/access.log" common
	LogLevel warn
</VirtualHost>

    httpd.conf: (here I've just loaded almost all the modules related to mod_proxy)

    LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule proxy_express_module modules/mod_proxy_express.so
LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so
#LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
#LoadModule proxy_html_module modules/mod_proxy_html.so
LoadModule proxy_hcheck_module modules/mod_proxy_hcheck.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_http2_module modules/mod_proxy_http2.so
LoadModule proxy_scgi_module modules/mod_proxy_scgi.so
LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so
LoadModule watchdog_module modules/mod_watchdog.so
    Thank you Krydos & wolstech sir for helping me out.

     

     

    Now another question, you can see all the configurations I have, can I host the application in Heliohost?

    Creating and connecting to Secure WebSockets in same IP

    in Website Management and Coding

    Posted

    Yes but the previous error which is always occurring in Firefox Console "Firefox can’t establish a connection to the server at wss://192.168.1.201/ws/." But this time another error was occurred "500 Proxy Error" and the "SSL_ERROR_RX_RECORD_TOO_LONG" error has gone but the WSS request is going through HTTPS instead of WSS. I've changed my client.js after setting up proxy. Here is the new one:

    var colors = [
	'#007AFF','#FF7000','#FF7000','#15E25F','#CFC700','#CFC700','#CF1100','#CF00BE','#F00'
];
var color_pick = Math.floor(Math.random() * colors.length);

//create a new WebSocket object.
var msgBox = $('#message-box');
//var wsUri = "wss://localhost/ws/";
var wsUri = "wss://192.168.1.201/ws/";
//var wsUri = "wss://192.168.1.201:9000/server.php";
websocket = new WebSocket(wsUri);

websocket.readyStateChange = function (e) { // connection is open 
	console.log(e);
}

websocket.onopen = function (ev) { // connection is open 
	msgBox.append('<div class="system_msg" style="color:#bbbbbb">Welcome to my "Demo WebSocket Chat box"!</div>'); //notify user
}
// Message received from server
websocket.onmessage = function (ev) {
	var response = JSON.parse(ev.data); //PHP sends Json data

	
	
	var res_type = response.type; //message type
	var user_message = response.message; //message text
	var user_name = response.name; //user name
	var user_color = response.color; //color

console.log(res_type);
	switch (res_type) {
		case 'usermsg':
			if($("#user_typing").length > 0)
				$("#user_typing").remove();
			msgBox.append('<div><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="user_msg">' + user_message + '</span></div>');
			break;
		case 'system':
			msgBox.append('<div style="color:#bbbbbb">' + user_message + '</div>');
			break;
		case 'notification':
			var user_notification = response.notification; //notification type
			if(user_notification === 'typing'){
				if($("#user_typing").length <= 0)
					msgBox.append('<div id="user_typing"><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="system_msg">' + user_message + '</span></div>');
			} else
				msgBox.append('<div id="user_notification"><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="system_msg">' + user_message + '</span></div>');
			break;
	}
	msgBox[0].scrollTop = msgBox[0].scrollHeight; //scroll message 

};

websocket.onerror = function (e) {
	msgBox.append('<div class="system_error">Error Occurred - ' + e.data + '</div>');
};
websocket.onclose = function (e) {
	if(e.wasClean)
		msgBox.append('<div class="system_msg">Connection Closed</div>');
	else
		msgBox.append('<div class="system_error">Connection Interrupted - [Error#' + e.code + '] ' + e.reason + '</div>');
};

//Message send button
$('#send-message').click(function () {
	send_message();
});

//User hits enter key 
$("#message").on("keydown", function (event) {
	if (event.which == 13) {
		send_message();
	}
});
//User typing
$("#message").on("keypress", function (event) {
	if (event.which !== 13)
		send_notification('typing','Typing...');
});

var notifications = [], isTyping = false;

//Send message
function send_message() {
	var message_input = $('#message'); //user message text
	var name_input = $('#name'); //user name

	if (message_input.val() == "") { //empty name?
		alert("Enter your Name please!");
		return;
	}
	if (message_input.val() == "") { //emtpy message?
		alert("Enter Some message Please!");
		return;
	}
	
	isTyping = false;

	//prepare json data
	var msg = {
		message: message_input.val(),
		name: name_input.val(),
		color: colors[color_pick]
	};
	//convert and send data to server
	websocket.send(JSON.stringify(msg));
	message_input.val(''); //reset message input
}

//Send message
function send_notification(type, msg) {
	var name_input = $('#name'); //user name
	notifications.push(type);
	//prepare json data
	var msg = {
		notification: type,
		message: msg,
		name: name_input.val(),
		color: colors[color_pick]
	};
	if(!isTyping){
		isTyping = true;
		//convert and send data to server
		websocket.send(JSON.stringify(msg));
	}
}
    Here is the Virtual Host configuration:

    
<VirtualHost _default_:443>
	SSLEngine on
	ServerName localhost:443
	SSLCertificateFile "${SRVROOT}/conf/ssl/localhost.crt"
	SSLCertificateKeyFile "${SRVROOT}/conf/ssl/localhost.pem"
	DocumentRoot "${SRVROOT}/htdocs"
	# DocumentRoot access handled globally in httpd.conf
	CustomLog "${SRVROOT}/logs/ssl_request.log" \"%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
	<Directory "${SRVROOT}/htdocs">
		Options Indexes Includes FollowSymLinks
		AllowOverride AuthConfig Limit FileInfo
		Require all granted
	</Directory>
	SSLProxyEngine on
	ProxyPass /ws/ wss://localhost:9000
	ProxyPassReverse /ws/ wss://localhost:9000
	ProxyRequests off
</VirtualHost>

<VirtualHost 192.168.1.201:443>
	DocumentRoot "${SRVROOT}/htdocs"
	ServerName 192.168.1.201
	SSLEngine on
	#SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL
	SSLCipherSuite ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:DHE-RSA-AES128-SHA
	SSLCertificateFile "${SRVROOT}/conf/ssl/localhost.crt"
	SSLCertificateKeyFile "${SRVROOT}/conf/ssl/localhost.pem"
	SSLCertificateChainFile "${SRVROOT}/conf/ssl/ca-chain.pem"
	SSLProxyEngine on
	ProxyPass /ws/ wss://192.168.1.201:9000
	ProxyPassReverse /ws/ wss://192.168.1.201:9000
	ProxyRequests off
	ErrorLog "${SRVROOT}/logs/error.log"
	CustomLog "${SRVROOT}/logs/access.log" common
	LogLevel warn
</VirtualHost>

    Creating and connecting to Secure WebSockets in same IP

    in Website Management and Coding

    Posted

    And one more thing, when I've inspected the error in the Network tab if Firefox Developer Tools, I found the error with request is showing a error code which is "ssl_error_rx_record_too_long".

    I've even tried to access the https with port 9000 like https://192.168.1.201:9000, the error was still shown but when accessed https with the same IP without port or with port 443 it's working fine.

    Creating and connecting to Secure WebSockets in same IP

    in Website Management and Coding

    Posted

    Hi again, I'm creating a chat system with PHP. So I've created the WebSocket server in PHP and the client using the built-in browser WebSocket API. Everything is working fine when I access the client using 'http' & 'ws' protocol, but my problem is when I access the client using 'https' & 'wss', I'm getting the error in firefox saying that: "Firefox can’t establish a connection to the server at wss://192.168.1.201:9000/server.php.". The files are located on https://192.168.1.201/socket/chat2/.

     

    Here are the codes:

     

     

    /socket/chat2/server.php:

    <?php
$host = '192.168.1.201'; //host
$port = '9000'; //port
$null = NULL; //null var

//Create TCP/IP sream socket
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
if ($socket === false) {
    echo "socket_create() failed: reason: " . socket_strerror(socket_last_error()) . "\n";
}
//reuseable port
socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);

//bind socket to specified host
socket_bind($socket, 0, $port);

//listen to port
socket_listen($socket);

//create & add listning socket to the list
$clients = array($socket);

//start endless loop, so that our script doesn't stop
while (true) {
	//manage multipal connections
	$changed = $clients;
	//returns the socket resources in $changed array
	socket_select($changed, $null, $null, 0, 10);
	
	//check for new socket
	if (in_array($socket, $changed)) {
		$socket_new = socket_accept($socket); //accpet new socket
		$clients[] = $socket_new; //add socket to client array
		
		$header = socket_read($socket_new, 1024); //read data sent by the socket
		perform_handshaking($header, $socket_new, $host, $port); //perform websocket handshake
		
		socket_getpeername($socket_new, $ip); //get ip address of connected socket
		$response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' connected'))); //prepare json data
		send_message($response); //notify all users about new connection
		
		//make room for new socket
		$found_socket = array_search($socket, $changed);
		unset($changed[$found_socket]);
	}
	
	//loop through all connected sockets
	foreach ($changed as $changed_socket) {	
		
		//check for any incomming data
		while(socket_recv($changed_socket, $buf, 1024, 0) >= 1)
		{
			$received_text = unmask($buf); //unmask data
			$tst_msg = json_decode($received_text, true); //json decode 
			$user_name = $tst_msg['name']; //sender name
			$user_message = $tst_msg['message']; //message text
			$user_color = $tst_msg['color']; //color
			
			//prepare data to be sent to client
			if(!empty($tst_msg['notification']))
				$response_text = array('type'=>'notification', 'name'=>$user_name, 'message'=>$user_message, 'color'=>$user_color);
			else
				$response_text = array('type'=>'usermsg', 'name'=>$user_name, 'message'=>$user_message, 'color'=>$user_color);
			
			$response_text = mask(json_encode($response_text));
			send_message($response_text); //send data
			break 2; //exist this loop
		}
		
		$buf = @socket_read($changed_socket, 1024, PHP_NORMAL_READ);
		if ($buf === false) { // check disconnected client
			// remove client for $clients array
			$found_socket = array_search($changed_socket, $clients);
			socket_getpeername($changed_socket, $ip);
			unset($clients[$found_socket]);
			
			//notify all users about disconnected connection
			$response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' disconnected')));
			send_message($response);
		}
	}
}
// close the listening socket
socket_close($socket);

function send_message($msg)
{
	global $clients;
	foreach($clients as $changed_socket)
	{
		@socket_write($changed_socket,$msg,strlen($msg));
	}
	return true;
}


//Unmask incoming framed message
function unmask($text) {
	$length = ord($text[1]) & 127;
	if($length == 126) {
		$masks = substr($text, 4, 4);
		$data = substr($text, 8);
	}
	elseif($length == 127) {
		$masks = substr($text, 10, 4);
		$data = substr($text, 14);
	}
	else {
		$masks = substr($text, 2, 4);
		$data = substr($text, 6);
	}
	$text = "";
	for ($i = 0; $i < strlen($data); ++$i) {
		$text .= $data[$i] ^ $masks[$i%4];
	}
	return $text;
}

//Encode message for transfer to client.
function mask($text)
{
	$b1 = 0x80 | (0x1 & 0x0f);
	$length = strlen($text);
	
	if($length <= 125)
		$header = pack('CC', $b1, $length);
	elseif($length > 125 && $length < 65536)
		$header = pack('CCn', $b1, 126, $length);
	elseif($length >= 65536)
		$header = pack('CCNN', $b1, 127, $length);
	return $header.$text;
}

//handshake new client.
function perform_handshaking($receved_header,$client_conn, $host, $port)
{
	$headers = array();
	$lines = preg_split("/\r\n/", $receved_header);
	foreach($lines as $line)
	{
		$line = chop($line);
		if(preg_match('/\A(\S+): (.*)\z/', $line, $matches))
		{
			$headers[$matches[1]] = $matches[2];
		}
	}

	$secKey = $headers['Sec-WebSocket-Key'];
	$secAccept = base64_encode(pack('H*', sha1($secKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));
	//hand shaking header
	$upgrade  = "HTTP/1.1 101 Web Socket Protocol Handshake\r\n" .
	"Upgrade: websocket\r\n" .
	"Connection: Upgrade\r\n" .
	"WebSocket-Origin: $host\r\n" .
	"WebSocket-Location: wss://$host:$port/server.php\r\n".
	"Sec-WebSocket-Accept:$secAccept\r\n\r\n";
	socket_write($client_conn,$upgrade,strlen($upgrade));
}
?>

    /socket/chat2/client.js:

    var colors = [
	'#007AFF','#FF7000','#FF7000','#15E25F','#CFC700','#CFC700','#CF1100','#CF00BE','#F00'
];
var color_pick = Math.floor(Math.random() * colors.length);

//create a new WebSocket object.
var msgBox = $('#message-box');
var wsUri = "wss://192.168.1.201:9000/server.php";
websocket = new WebSocket(wsUri);

websocket.readyStateChange = function (e) { // connection is open 
	console.log(e);
}

websocket.onopen = function (ev) { // connection is open 
	msgBox.append('<div class="system_msg" style="color:#bbbbbb">Welcome to my "Demo WebSocket Chat box"!</div>'); //notify user
}
// Message received from server
websocket.onmessage = function (ev) {
	var response = JSON.parse(ev.data); //PHP sends Json data

	
	
	var res_type = response.type; //message type
	var user_message = response.message; //message text
	var user_name = response.name; //user name
	var user_color = response.color; //color

console.log(res_type);
	switch (res_type) {
		case 'usermsg':
			if($("#user_typing").length > 0)
				$("#user_typing").remove();
			msgBox.append('<div><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="user_msg">' + user_message + '</span></div>');
			break;
		case 'system':
			msgBox.append('<div style="color:#bbbbbb">' + user_message + '</div>');
			break;
		case 'notification':
			var user_notification = response.notification; //notification type
			if(user_notification === 'typing'){
				if($("#user_typing").length <= 0)
					msgBox.append('<div id="user_typing"><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="system_msg">' + user_message + '</span></div>');
			} else
				msgBox.append('<div id="user_notification"><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="system_msg">' + user_message + '</span></div>');
			break;
	}
	msgBox[0].scrollTop = msgBox[0].scrollHeight; //scroll message 

};

websocket.onerror = function (e) {
	msgBox.append('<div class="system_error">Error Occurred - ' + e.data + '</div>');
};
websocket.onclose = function (e) {
	if(e.wasClean)
		msgBox.append('<div class="system_msg">Connection Closed</div>');
	else
		msgBox.append('<div class="system_error">Connection Interrupted - [Error#' + e.code + '] ' + e.reason + '</div>');
};

//Message send button
$('#send-message').click(function () {
	send_message();
});

//User hits enter key 
$("#message").on("keydown", function (event) {
	if (event.which == 13) {
		send_message();
	}
});
//User typing
$("#message").on("keypress", function (event) {
	if (event.which !== 13)
		send_notification('typing','Typing...');
});

var notifications = [], isTyping = false;

//Send message
function send_message() {
	var message_input = $('#message'); //user message text
	var name_input = $('#name'); //user name

	if (message_input.val() == "") { //empty name?
		alert("Enter your Name please!");
		return;
	}
	if (message_input.val() == "") { //emtpy message?
		alert("Enter Some message Please!");
		return;
	}
	
	isTyping = false;

	//prepare json data
	var msg = {
		message: message_input.val(),
		name: name_input.val(),
		color: colors[color_pick]
	};
	//convert and send data to server
	websocket.send(JSON.stringify(msg));
	message_input.val(''); //reset message input
}

//Send message
function send_notification(type, msg) {
	var name_input = $('#name'); //user name
	notifications.push(type);
	//prepare json data
	var msg = {
		notification: type,
		message: msg,
		name: name_input.val(),
		color: colors[color_pick]
	};
	if(!isTyping){
		isTyping = true;
		//convert and send data to server
		websocket.send(JSON.stringify(msg));
	}
}

    /socket/chat2/index.html:

    <?php 
$colors = array('#007AFF','#FF7000','#FF7000','#15E25F','#CFC700','#CFC700','#CF1100','#CF00BE','#F00');
$color_pick = array_rand($colors);
?>
<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style type="text/css">
			.chat-wrapper {
				font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
				background: #00a6bb;
				padding: 20px;
				margin: 20px auto;
				box-shadow: 2px 2px 2px 0px #00000017;
				max-width:700px;
				min-width:500px;
			}
			.system_error {
				color: #a00;
			}
			.system_msg {
				color: #bbb;
			}
			.user_msg {
				color: #00f;
			}
			#message-box {
				width: 97%;
				display: inline-block;
				height: 300px;
				background: #fff;
				box-shadow: inset 0px 0px 2px #00000017;
				overflow: auto;
				padding: 10px;
			}
			.user-panel{
				margin-top: 10px;
			}
			input[type=text]{
				border: none;
				padding: 5px 5px;
				box-shadow: 2px 2px 2px #0000001c;
			}
			input[type=text]#name{
				width:20%;
			}
			input[type=text]#message{
				width:60%;
			}
			button#send-message {
				border: none;
				padding: 5px 15px;
				background: #11e0fb;
				box-shadow: 2px 2px 2px #0000001c;
			}
		</style>
	</head>
	<body>
		<div class="chat-wrapper">
			<div id="message-box"></div>
			<div class="user-panel">
				<input type="text" name="name" id="name" placeholder="Your Name" maxlength="15" />
				<input type="text" name="message" id="message" placeholder="Type your message here..." maxlength="100" />
				<button id="send-message">Send</button>
			</div>
		</div>
		<script src="https://cdn.sgnetworks.net/jquery/lib/3.2.1/jquery-3.2.1.min.js"></script>
		<script language="javascript" type="text/javascript" src="client.js"></script>
	</body>
</html>

    [Krydos] Alternatives for manually parking domains for users...

    in Escalated Requests

    Posted

    Okay, thanks. I hope Krydos sir will do something to allow users to park those domains. In case it takes too long, can you suggest me some other free domain providers (any type of domain would be good, except Freenom).

    Meanwhile, can you look at my another topic which is still not solved: https://www.helionet.org/index/topic/38541-development-of-an-apache-httpd-handler-module/?fromsearch=1

    [Krydos] Alternatives for manually parking domains for users...

    in Escalated Requests

    Posted

    Okay after trying that, I'm getting the following error in cPanel which is as same as the eu.org:

    There was an error when the system attempted to create the alias. Park::park failed: (XID 5un3s3) Sorry, the domain is already pointed to an IP address that does not appear to use DNS servers associated with this server. Please transfer the domain to this servers nameservers or have your administrator add one of its nameservers to /etc/ips.remotedns and make the proper A entries on that remote nameserver.

×
×
  • Create New...