![\"Download-Speed-Drosselung](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2017\/09\/ci-downloadspeed.png\")
<\/a><\/p>\n<\/p>\n
CURL AS THE CORE OF THE APPLICATION<\/h2>\n
When we talk about cURL, <\/a>we are talking about a widely used command line application that is specifically designed to transfer data within computer networks. The advantage is in how easy it is to use, because the program library has been ported to essentially all operating systems. In addition, it also has a vast range of functions.<\/p>\n Unlike its older predecessor \u201cwget\u201d, cURL controls not only the downloading, but also the uploading of files. Numerous parameters provide a correspondingly large number of options, thereby covering nearly every scenario.<\/p>\n <\/p>\n Now we\u2019ve arrived at the essential part of this tutorial: the integration of speed limitation in a CodeIgniter project.<\/p>\n <\/p>\n In order to start our project, we first have to establish a basis on which we can subsequently build. In order to do so, we need to download the latest version of the framework from the CodeIgniter homepage<\/a>. In this case, this would be version 3.1.5.<\/p>\n Next copy all the files \u2013 ideally to the subfolder \u201cci-downloadspeed\u201d \u2013 onto the webserver (e.g. XAMPP, LAMP, etc.), and open its root directory in your browser, e.g., http:\/\/localhost\/ci-downloadspeed\/. Once all of the requirements for the framework are met, you should then see the CodeIgniter welcome page.<\/p>\n In order to ensure that the speaking URLs can also be accessed correctly, create an .htaccess<\/strong> file with the following content:<\/p>\n All of the resources needed for the actual application (CSS and JS files) are created in the \u201cassets<\/em>\u201d directory, and the sample download files will later be created in the \u201cdownloads<\/em>\u201d directory (information about this can be found in the \u201cConclusion\u201d section).<\/p>\n Next, open \/application\/config\/autoload.php<\/strong> (the autoloader configuration file) and then add the URL helper. This way, we will be able to use the base_url()<\/em> function both in the frontend and this time, even within the application itself.<\/p>\n In \/application\/config\/routes.php<\/strong> (the route configuration file), we then need to change the default controller from \u201cwelcome<\/em>\u201d to \u201chome<\/em>\u201d, since we want our speed throttling application to be loaded by default later.<\/p>\n <\/p>\n In order to do so, navigate to \/application\/controller <\/strong>and create a file named Home.php<\/strong> (case-sensitive!). In this case, the index action is very rudimentary, since it has no functionality on its own. It is only being used to display the main page of our application:<\/p>\n Now let\u2019s look at the HTML layout in the linked view.<\/p>\n What we have created here is a basic layout with a navigation bar and a simple block of text with a heading.<\/p>\n Directly underneath it (where it currently still reads \u201cHere will be\u2026<\/em>\u201d) is the markup for our application: a speed meter, which we will configure based on the \u201cHTML5 Canvas Speedometer<\/a>\u201d. In addition, there are two download buttons (one for a smaller file, and one for a larger file):<\/p>\n The linked bootstrap_flatly.min.css<\/strong> file is the free \u201cFlatly<\/a>\u201d Bootstrap theme from Bootswatch<\/a>. We will define a couple of basic styles in the style.css<\/strong> file:<\/p>\n The logic for the frontend of our application belongs in the linked app.js<\/strong> file.<\/p>\n This takes care of the graphical canvas rendering of the speed meter. We now expand this file to include our actual functions (important: it is essential that you write where \u201cTODO: add listener\u2026<\/em>\u201d is currently located within the \u201cdocument.ready()\u201d block!). There you will find, among other things, the central function used to set the selected download speed (\u201csetSpeed()<\/em>\u201c) and a listener, which will react to the range input field. In due course, the listener will transfer the selected value into the speed meter, and will dynamically adjust our two download links.<\/p>\n Because the listener will dynamically adjust both download links, we didn\u2019t set the link target for the two download buttons directly, but instead just set it via a data<\/a> attribute using a placeholder for the actual speed. In this way, we can use the attribute as a template, and we can keep setting the link target dynamically. Initially, we set the download speed to 100 KB\/s. This is the default setting that a user gets when they open our application.<\/p>\n <\/p>\n To integrate speed limitation, we now need our download action, the structure of which we have already created.<\/p>\n In our example, we first check in this download action whether the large or the small sample file is being loaded. Once this check has been performed, we build the public URL (with domain or IP, depending on the configuration) and the internal URL (absolute path on the server). At the same time, we calculate our download speed by converting the KB\/s into bytes\/s (using a factor of 1000).<\/p>\n We subsequently define the PHP header for a file download. In order to do so, we simply use \u201capplication\/octet-stream<\/em>\u201d as a \u201ccontent type\u201d so that the download is always forced and the browser doesn\u2019t try to open or display the file itself. Moreover, information regarding the size of the file now (optionally) follows so that the browser is able to detect and display the progress of the download. The name of the file itself comes at the end.<\/p>\n The actual download then follows. We use cURL for this, and we set its parameters as follows:<\/p>\n These are essentially mostly standard parameters with two exceptions: CURLOPT_MAX_RECV_SPEED_LARGE<\/strong><\/a> and CURLOPT_WRITEFUNCTION<\/strong><\/a>.<\/p>\n The CURLOPT_MAX_RECV_SPEED_LARGE<\/strong> option allows us to determine the maximum download speed with which the cURL library reads the data. The task here is in bytes\/s, which is the reason for our previous conversion. If the value \u201c0\u201d is specified, there is no throttling and the download is performed with no limits on the speed. The actual speed thus depends more on external factors such as the internet connection itself.<\/p>\n We indicate our own output handler using CURLOPT_WRITEFUNCTION<\/strong> so that the data being read by cURL can also be streamed directly to the user, and not loaded locally onto the server for minutes (or even hours, depending on the speed!) first, before it is delivered. This ensures that the content received is forwarded to the user 1:1 in real time.<\/p>\n To summarize, our download action now appears as follows:<\/p>\n <\/p>\n Speed limitation for file downloads is quick and easy to implement using the cURL library. All that is necessary is to configure cURL correctly.<\/p>\n In our sample project, it is currently also possible to access downloads directly using their public URL. This is necessary for the internal download via cURL, since cURL is essentially functioning as a proxy here. In practice, however, the possibility of direct access should be prevented. Assuming that the server has a static IP address, it is possible to place an .htaccess in the \u201cdownloads<\/em>\u201d folder, for example, which would only allow the server to be accessed using the server IP address (alternatively, vHost-Config could also be used).<\/p>\n Here is an example of this kind of .htaccess file (in this case, 188.65.77.77 would be the IP of the server on which the application is running):<\/p>\n This would ensure that the application could access the public URL for the purposes of internal downloads, but that no other users would have access. It would also be possible to load the files from a remote server, and that the meta-information (such as file size) could be obtained from a database.<\/p>\n The two linked dummy download files could be obtained via the Anexia Network Map <\/a>or alternatively, directly via these links, among other options: 100MB<\/a> and 1GB<\/a> (via the DATASIX<\/a> datacenter).<\/p>\n We have been working with the CodeIgniter framework in this tutorial because it is very easy to understand and requires almost no training time. In principle, however, any framework could be used, for example Laravel <\/a>or Zend<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" In this tutorial, I want to show you how to integrate an option to limit download speed into a CodeIgniter project.<\/p>\n","protected":false},"author":15,"featured_media":2961,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1135],"tags":[1657,1681,1683,1685,1329,1630,1570],"yoast_head":"\nSETUP WITH CODEIGNITER<\/h2>\n
<\/a><\/p>\nSTEP 1: BUILD THE BASIC SYSTEM<\/h2>\n
RewriteEngine on\r\n\r\nRewriteRule ^(assets|downloads)($|\/) - [L]\r\nRewriteRule .* index.php<\/pre>\n
$autoload['helper'] = array('url');<\/pre>\n$route['default_controller'] = 'home';\r\n$route['404_override'] = '';\r\n$route['translate_uri_dashes'] = FALSE;<\/pre>\n
STEP 2: DEFINE THE BASIC LAYOUT<\/h2>\n
\nNext, we need to create the basic framework for our application in this file, which consists of two actions: one for the index page and one for the throttled file downloads. The latter will receive parameters for the type of download (in our example, the parameter will only distinguish between a small file and a large file), as well as parameters for the download speed itself (in KB\/s).<\/p>\n<?php\r\ndefined('BASEPATH') OR exit('No direct script access allowed');\r\n\r\nclass Home extends CI_Controller\r\n{\r\n\r\n\r\n\tpublic function index()\r\n\t{\r\n\t\t\r\n\t}\r\n\r\n\r\n\tpublic function download($type = 1, $speed_kbs = 64)\r\n\t{\r\n\t\t\r\n\t}\r\n\r\n}\r\n<\/pre>\npublic function index()\r\n{\r\n\t\/\/ load view\r\n\t$this->load->view('home');\r\n}<\/pre>\n<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>\r\n<!DOCTYPE html>\r\n<html lang=\"en\" xmlns=\"http:\/\/www.w3.org\/1999\/html\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <meta name=\"description\" content=\"\">\r\n <meta name=\"author\" content=\"\">\r\n\r\n <title>CI Download-Speed<\/title>\r\n\r\n <!-- Latest compiled and minified CSS -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"\r\n integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz\/K68vbdEjh4u\" crossorigin=\"anonymous\">\r\n\r\n <!-- Custom CSS for basic styling -->\r\n <link rel=\"stylesheet\" href=\"<?php echo base_url(); ?>assets\/css\/style.css\"\/>\r\n\r\n <!-- Optional CSS for individual theming (powered by Bootswatch - https:\/\/bootswatch.com\/) -->\r\n <link rel=\"stylesheet\" href=\"<?php echo base_url(); ?>assets\/css\/bootstrap_flatly.min.css\"\/>\r\n\r\n <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n <!--[if lt IE 9]>\r\n <script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n <script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n <![endif]-->\r\n<\/head>\r\n<body>\r\n\r\n<nav class=\"navbar navbar-default navbar-fixed-top\">\r\n <div class=\"container\">\r\n <div class=\"navbar-header\">\r\n <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#navbar\"\r\n aria-expanded=\"false\" aria-controls=\"navbar\">\r\n <span class=\"sr-only\">Toggle navigation<\/span>\r\n <span class=\"icon-bar\"><\/span>\r\n <span class=\"icon-bar\"><\/span>\r\n <span class=\"icon-bar\"><\/span>\r\n <\/button>\r\n <a class=\"navbar-brand\" href=\"#\">CodeIgniter Download-Speed<\/a>\r\n <\/div>\r\n <div id=\"navbar\" class=\"collapse navbar-collapse\">\r\n <ul class=\"nav navbar-nav\">\r\n <li class=\"active\"><a href=\"<?php echo base_url(); ?>\">Home<\/a><\/li>\r\n <li><a href=\"#about\">About<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/nav>\r\n\r\n<div class=\"container\">\r\n\r\n <div class=\"intro\">\r\n <h1>Choose your download speed!<\/h1>\r\n <p class=\"lead\">\r\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br\/>\r\n sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <br\/>\r\n sed diam voluptua.\r\n <\/p>\r\n\r\n Here will be our core application...\r\n \r\n\r\n\r\n <\/div>\r\n \r\n<\/div>\r\n\r\n\r\n<!-- Bootstrap core JavaScript\r\n================================================== -->\r\n<!-- Placed at the end of the document so the pages load faster -->\r\n<script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-3.2.1.min.js\"\r\n integrity=\"sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=\" crossorigin=\"anonymous\"><\/script>\r\n<script type=\"text\/javascript\" src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"\r\n integrity=\"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\"\r\n crossorigin=\"anonymous\"><\/script>\r\n<script type=\"text\/javascript\" src=\"<?php echo base_url(); ?>assets\/js\/app.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<canvas class=\"canvas\" id=\"myCanvas\" width=\"600\" height=\"400\">\r\n Your browser does not support the HTML5 canvas tag.\r\n<\/canvas>\r\n\r\n<div class=\"row\">\r\n <div class=\"col-md-6 col-md-offset-3\">\r\n <div id=\"slider\">\r\n <p class=\"lead\">max. <span id=\"selectedSpeed\"><\/span> kB\/s<\/p>\r\n\r\n <input style=\"width:100%\" id=\"slide\" type=\"range\" min=\"0\" max=\"1750\" step=\"50\" value=\"100\"\/>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<p> <\/p>\r\n\r\n<p>\r\n <a href=\"#\" class=\"btn btn-primary btn-lg start-download\"\r\n data-url=\"<?php echo base_url(); ?>home\/download\/1\/###speed###\">\r\n <span class=\"glyphicon glyphicon-download-alt\" aria-hidden=\"true\"><\/span> Download (100 MB)\r\n <\/a>\r\n\r\n \r\n\r\n <a href=\"#\" class=\"btn btn-primary btn-lg start-download\"\r\n data-url=\"<?php echo base_url(); ?>home\/download\/2\/###speed###\">\r\n <span class=\"glyphicon glyphicon-download-alt\" aria-hidden=\"true\"><\/span> Download (1 GB)\r\n <\/a>\r\n<\/p><\/pre>\n
\nThis CSS theme is optional and can therefore be omitted if you prefer.<\/p>\nbody {\r\n\tpadding-top: 50px;\r\n}\r\n.intro {\r\n\tpadding: 40px 15px;\r\n\ttext-align: center;\r\n}\r\n\r\n.intro h1 {\r\n\tmargin-bottom: 40px;\r\n}<\/pre>\n\/\/ Based on: http:\/\/www.knowstack.com\/html5-canvas-speedometer\/\r\n\r\n$(document).ready(function(){\r\n\r\n var draw = function(speed)\r\n {\r\n var canvas = document.getElementById(\"myCanvas\");\r\n var context = canvas.getContext(\"2d\");\r\n context.clearRect(0,0,canvas.width, canvas.height);\r\n var centerX = canvas.width \/ 2;\r\n var centerY = (canvas.height \/ 5) * 4;\r\n var radius = canvas.width \/ 2 - 20;\r\n\r\n context.beginPath();\r\n context.arc(centerX, centerY, radius, Math.PI*0.10, Math.PI*-1.1, true);\r\n\r\n var gradience = context.createRadialGradient(centerX, centerY, radius-radius\/2, centerX, centerY, radius-radius\/8);\r\n gradience.addColorStop(0, '#ffffff');\r\n gradience.addColorStop(1, '#18bc9c');\r\n\r\n context.fillStyle = gradience;\r\n context.fill();\r\n context.closePath();\r\n context.restore();\r\n\r\n context.beginPath();\r\n context.strokeStyle = '#ffffff';\r\n context.translate(centerX,centerY);\r\n var increment = 50;\r\n context.font=\"15px Helvetica\";\r\n for (var i=-18; i<=18; i++)\r\n {\r\n angle = Math.PI\/30*i;\r\n sineAngle = Math.sin(angle);\r\n cosAngle = -Math.cos(angle);\r\n\r\n if (i % 5 == 0) {\r\n context.lineWidth = 8;\r\n iPointX = sineAngle *(radius -radius\/4);\r\n iPointY = cosAngle *(radius -radius\/4);\r\n oPointX = sineAngle *(radius -radius\/7);\r\n oPointY = cosAngle *(radius -radius\/7);\r\n\r\n wPointX = sineAngle *(radius -radius\/2.5);\r\n wPointY = cosAngle *(radius -radius\/2.5);\r\n context.fillText((i+18)*increment,wPointX-2,wPointY+4);\r\n }\r\n else\r\n {\r\n context.lineWidth = 2;\r\n iPointX = sineAngle *(radius -radius\/5.5);\r\n iPointY = cosAngle *(radius -radius\/5.5);\r\n oPointX = sineAngle *(radius -radius\/7);\r\n oPointY = cosAngle *(radius -radius\/7);\r\n }\r\n context.beginPath();\r\n context.moveTo(iPointX,iPointY);\r\n context.lineTo(oPointX,oPointY);\r\n context.stroke();\r\n context.closePath();\r\n\r\n }\r\n\r\n var numOfSegments = speed\/increment;\r\n numOfSegments = numOfSegments -18;\r\n angle = Math.PI\/30*numOfSegments;\r\n sineAngle = Math.sin(angle);\r\n cosAngle = -Math.cos(angle);\r\n pointX = sineAngle *(3\/4*radius);\r\n pointY = cosAngle *(3\/4*radius);\r\n\r\n context.beginPath();\r\n context.strokeStyle = '#2c3e50';\r\n context.arc(0, 0, 19, 0, 2*Math.PI, true);\r\n context.fill();\r\n context.closePath();\r\n\r\n context.beginPath();\r\n context.lineWidth=6;\r\n\r\n context.moveTo(0,0);\r\n context.lineTo(pointX,pointY);\r\n\r\n context.stroke();\r\n context.closePath();\r\n context.restore();\r\n context.translate(-centerX,-centerY);\r\n };\r\n\r\n \r\n \/\/ TODO: add listener for range-field and function for setting the selected speed\r\n\r\n});<\/pre>\nvar setSpeed = function(speed)\r\n{\r\n \/\/ prevent a speed of zero\r\n if( speed == 0 ){\r\n speed = 1;\r\n }\r\n\r\n \/\/ draw speedmeter graphic\r\n draw(speed);\r\n\r\n \/\/ write text under speedmeter graphic\r\n $('#selectedSpeed').text(speed);\r\n\r\n \/\/ set individual download url with dynamically speed assignment\r\n $('a.start-download').each(function(i, v){\r\n var url = $(v).data('url');\r\n url = url.replace('###speed###', speed);\r\n\r\n $(v).attr('href', url);\r\n });\r\n};\r\n\r\n\r\n\/\/ set inital speed\r\nsetSpeed(100);\r\n\r\n\r\n\/\/ check for change of speed value while dragging\r\n$(document).on('input change', '#slide', function() {\r\n setSpeed( $(this).val() );\r\n});<\/pre>\nSTEP 3: INTEGRATING LIMITATION<\/h2>\n
public function download($type = 1, $speed_kbs = 64)\r\n{\r\n\t\/\/ detect, which example file should be used\r\n\tif ($type == 2) {\r\n\t\t$filename = '1000mb.bin';\r\n\t} else {\r\n\t\t$filename = '100mb.bin';\r\n\t}\r\n\r\n\t\/\/ build up public URL for file (for public access via cURL)\r\n\t$public_filename = base_url() . 'downloads\/' . $filename;\r\n\r\n\t\/\/ build up internal URL for file (for internal access, like filesize())\r\n\t$local_filename = FCPATH . 'downloads\/' . $filename;\r\n\r\n\r\n\t\/\/ get speed in Bytes\/s\r\n\t$speed = $speed_kbs * 1000;\r\n\r\n\t\/\/ prepare headers for forcing file download\r\n\theader('Content-Type: application\/octet-stream');\r\n\theader('Content-Length: ' . filesize($local_filename));\r\n\theader('Content-Disposition: attachment; filename=\"' . basename($filename) . '\"');\r\n\r\n\r\n\t\/\/ TODO: get file and provide it as streamed download (with speed limitation)\r\n}<\/pre>\n\/\/ init cURL\r\n$ch = curl_init();\r\n\r\n\/\/ read file from public URL\r\ncurl_setopt($ch, CURLOPT_URL, $public_filename);\r\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\r\ncurl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 500);\r\n\r\n\/\/ limit download speed (in bytes per second)\r\ncurl_setopt($ch, CURLOPT_MAX_RECV_SPEED_LARGE, $speed);\r\n\r\n\/\/ stream data in realtime, instead of locally download before finally delivery\r\ncurl_setopt($ch, CURLOPT_WRITEFUNCTION, function ($curl, $data) {\r\n\techo $data;\r\n\treturn strlen($data);\r\n});\r\n\r\n\/\/ perform \"cURL-query\"\r\ncurl_exec($ch);\r\n\r\n\/\/ close cURL session\r\ncurl_close($ch);<\/pre>\npublic function download($type = 1, $speed_kbs = 64)\r\n{\r\n\t\/\/ detect, which example file should be used\r\n\tif ($type == 2) {\r\n\t\t$filename = '1000mb.bin';\r\n\t} else {\r\n\t\t$filename = '100mb.bin';\r\n\t}\r\n\r\n\t\/\/ build up public URL for file (for public access via cURL)\r\n\t$public_filename = base_url() . 'downloads\/' . $filename;\r\n\r\n\t\/\/ build up internal URL for file (for internal access, like filesize())\r\n\t$local_filename = FCPATH . 'downloads\/' . $filename;\r\n\r\n\r\n\t\/\/ get speed in KB\/s\r\n\t$speed = $speed_kbs * 1000;\r\n\r\n\t\/\/ prepare headers for forcing file download\r\n\theader('Content-Type: application\/octet-stream');\r\n\theader('Content-Length: ' . filesize($local_filename));\r\n\theader('Content-Disposition: attachment; filename=\"' . basename($filename) . '\"');\r\n\r\n\r\n\t\/\/ init cURL\r\n\t$ch = curl_init();\r\n\r\n\t\/\/ read file from public URL\r\n\tcurl_setopt($ch, CURLOPT_URL, $public_filename);\r\n\tcurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\r\n\tcurl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 500);\r\n\r\n\t\/\/ limit download speed (in bytes per second)\r\n\tcurl_setopt($ch, CURLOPT_MAX_RECV_SPEED_LARGE, $speed);\r\n\r\n\t\/\/ stream data in realtime, instead of locally download before finally delivery\r\n\tcurl_setopt($ch, CURLOPT_WRITEFUNCTION, function ($curl, $data) {\r\n\t\techo $data;\r\n\t\treturn strlen($data);\r\n\t});\r\n\r\n\t\/\/ perform \"cURL-query\"\r\n\tcurl_exec($ch);\r\n\r\n\t\/\/ close cURL session\r\n\tcurl_close($ch);\r\n}<\/pre>\nCONCLUSION<\/h2>\n
Deny from all\r\nAllow from 188.65.77.77<\/pre>\n