Архивы html - Страница 3 из 4

Пробуем ReactJS

30.12.2019 Павел Грибов WEB

Если честно, пока не представляю, что можно сделать с ReactJS, что нельзя сделать удобно и понятно при помощи Jquery+PHP. Но решил таки попробовать. Итак, что такое ReactJS — фактически это надстройка над JavaScript написанная на языке JavaScript. Т.е. всё что написано на ReactJS — компилируется или «на лету» при помощи babel в javascript или при выкладывании в «продакт» и далее подключается вызовом обычного JavaScript.

Чтобы не разделять «продакт» «девелоп» и не возиться с бабелом, я у себя настроил один из вариантов, а именно в косоли висит запущеный скрипт-компилятор, который мониторит изменения файлов в папке src и при изменении чего-либо, компилирует файл в папку js. Соответственно всегда имеем «продакт».

Что нужно сделать чтоб начать пользоваться ReactJS:

1) Поставить NodeJS и ReactJS на компьютере где разрабатываем (компиляция кода ReactJS в JavaScript происходит при помощи его):

apt install nodejs
npm install babel-cli@6 babel-preset-react-app@3

1 2	apt install nodejs npm install babel-cli@6 babel-preset-react-app@3

2) Ставим npx — утилита которая позволяет запускать npm пакеты

npm install -g npx

1	npm install -g npx

3) Зпаускаем в консоли что-типа:

npx babel --watch src --out-dir js --presets react-app/prod

1	npx babel --watch src --out-dir js --presets react-app/prod

В моем случае все скрипты из папки src компилируются в папку js

В итоге html страница может выглядеть так:

<!DOCTYPE html>
<html>    
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <head>
        <meta charset="UTF-8">
        <title id="rj_title"></title>
    </head>
    <body id="rj_body">
        <div id="root"></div>
        <script src="js/test.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

</body>

</html>

а файл src/test.js так:

const name='Павел Игоревич';
const element = <h1>Привет {name}!</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

const name='Павел Игоревич';

const element = <h1>Привет {name}!</h1>;

ReactDOM.render(

element,

document.getElementById('root')

);

В браузере выведет:

Оставить комментарий html, javascript, reactjs

Простой способ сохранить файл по нажатию кнопки на странице (HTML)

08.02.2018 Павел Грибов PHP

Задача: по нажатию кнопки на странице, чтоб вызывался диалог сохранения файла и собственно сохранялся произвольный файл с сервера.

Решение:

В коде html страницы упоминаем скрытую форму:

<form method="post" action="inc/csvExport.php">
	<input type="hidden" name="csvBuffer" id="csvBuffer" value="" />
</form>

</form>

Добавляем туда же обработчик нажатия вида:

    $("#viewwork").click(function(){       
            document.forms[0].method='POST';
            document.forms[0].action=save_file.php; 
            document.forms[0].target='_self';
            document.forms[0].submit();  	    	    
       return false;
    });

$("#viewwork").click(function(){

document.forms[0].method='POST';

document.forms[0].action=save_file.php;

document.forms[0].target='_self';

document.forms[0].submit();

return false;

});

Ну код на сервере для:

save_file.php:

<?php

// Данный код создан и распространяется по лицензии GPL v3
// Изначальный автор данного кода - Грибов Павел
// http://грибовы.рф

$ex= "1;2;3;4;5;6;7";
 header("Content-type: application/msexcel");
    header("Accept-Ranges: bytes");
    header("Content-Length: " . strlen($ex));
    header("Content-Disposition: attachment; filename=rep_by_addr.csv");

?>

<?php

// Данный код создан и распространяется по лицензии GPL v3

// Изначальный автор данного кода - Грибов Павел

// http://грибовы.рф

$ex= "1;2;3;4;5;6;7";

header("Content-type: application/msexcel");

header("Accept-Ranges: bytes");

header("Content-Length: " . strlen($ex));

header("Content-Disposition: attachment; filename=rep_by_addr.csv");

csvExport.php:

<?php

// Данный код создан и распространяется по лицензии GPL v3
// Изначальный автор данного кода - Грибов Павел
// http://грибовы.рф

header('Content-type: application/vnd.ms-excel');
if (isset($_GET["csv"])==true){
    header("Content-Disposition: attachment; filename=file.csv");
} else {
    header("Content-Disposition: attachment; filename=file.xls");
};
header("Pragma: no-cache");

$buffer = $_POST['csvBuffer'];

try{
    echo $buffer;
}catch(Exception $e){

}
?>

<?php

// Данный код создан и распространяется по лицензии GPL v3

// Изначальный автор данного кода - Грибов Павел

// http://грибовы.рф

header('Content-type: application/vnd.ms-excel');

if (isset($_GET["csv"])==true){

header("Content-Disposition: attachment; filename=file.csv");

} else {

header("Content-Disposition: attachment; filename=file.xls");

};

header("Pragma: no-cache");

$buffer = $_POST['csvBuffer'];

try{

echo $buffer;

}catch(Exception $e){

}

Оставить комментарий html, javascript, php, сохранение файла

Потоковое видео rtsp на сайте

18.05.2016 Павел Грибов WEB

Задача: есть IP камера вещающая по протоколу rtsp. В html5 стандарте, этот протокол не поддерживается. Ни один флеш и javascript плеер, его так-же не воспроизводят. С плагинами в браузер — бред.

Решение: при помощи ngnix конвертируем видео в удобовариваемый формат. Решение стырено с: http://conture.by/post/1552#more-1552

Для начала необходимые пакеты:

apt-get install libpcre3 libpcre3-dev libssl-dev gcc build-essential unzip rtmpdump

1	apt-get install libpcre3 libpcre3-dev libssl-dev gcc build-essential unzip rtmpdump

Устанавливать nginx надо не через apt-get, а из исходников.

wget http://conture.by/wp-content/uploads/2015/06/nginx-1.8.0.tar.gz
tar -xzvf nginx-1.8.0.tar.gz
wget http://conture.by/wp-content/uploads/2015/06/nginx-rtmp-module-master.zip
unzip nginx-rtmp-module-master.zip -d nginx-rtmp-module-master
wget http://conture.by/wp-content/uploads/2015/06/ffmpeg_nginx.zip
unzip ffmpeg_nginx.zip -d /bin
chmod 777 /bin/ffmpeg_nginx
cd nginx-1.8.0
./configure --prefix=/usr --add-module=../nginx-rtmp-module-master/arut-nginx-rtmp-module-f62a083/ --pid-path=/var/run/nginx.pid --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --with-http_ssl_module
make
make install
cp ../nginx-rtmp-module-master/arut-nginx-rtmp-module-f62a083/stat.xsl /etc/nginx/stat.xsl

wget http://conture.by/wp-content/uploads/2015/06/nginx-1.8.0.tar.gz

tar -xzvf nginx-1.8.0.tar.gz

wget http://conture.by/wp-content/uploads/2015/06/nginx-rtmp-module-master.zip

unzip nginx-rtmp-module-master.zip -d nginx-rtmp-module-master

wget http://conture.by/wp-content/uploads/2015/06/ffmpeg_nginx.zip

unzip ffmpeg_nginx.zip -d /bin

chmod 777 /bin/ffmpeg_nginx

cd nginx-1.8.0

./configure --prefix=/usr --add-module=../nginx-rtmp-module-master/arut-nginx-rtmp-module-f62a083/ --pid-path=/var/run/nginx.pid --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --with-http_ssl_module

make

make install

cp ../nginx-rtmp-module-master/arut-nginx-rtmp-module-f62a083/stat.xsl /etc/nginx/stat.xsl

Далее открываем конфиг nginx расположенный /etc/nginx/nginx.conf и правим под себя. У меня он следующий…

user www-data;
worker_processes 4; # воркеры по количеству ядер процессора
pid /run/nginx.pid;
error_log  /var/log/nginx/nginx_error.log debug;
env PATH;
events {
    worker_connections 768;
}

http {
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 88;

        # rtmp stat

        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            # you can move stat.xsl to a different location
            root /etc/nginx/;
        }

        location / {
            rtmp_control all;
        }


        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }
    }
}

# RTMP proxy
rtmp {
    access_log /var/log/nginx/rtmp_access.log;
    server {
        listen 1935;
        ping 30s;
        notify_method get;
        # ретрансляция без звука
        application camera_1 {
            live on;
            exec_pull ffmpeg_nginx -i http://192.168.2.40:8000/71-camera1 -vcodec copy -f flv -an rtmp://localhost:1935/camera_1/live 2>>/var/log/nginx/ffmpeg_camera_1.log;
       }
       # конвертируем в меньшее разрешение без звука
        application cam_1 {
            live on;
            exec_pull ffmpeg_nginx -i http://192.168.2.40:8000/71-camera1 -threads 2 -f flv -r 25 -s 800x600 -an rtmp://localhost:1935/cam_1/live 2>>/var/log/nginx/ffmpeg_cam1.log;
       }
       # и ещё один поток...
        application infochan {
           live on;
           exec_pull ffmpeg_nginx -i http://192.168.2.40:8000/70-infokanal -threads 2 -f flv -r 25 -s 800x600 -an rtmp://localhost:1935/infochan/live 2>>/var/log/nginx/ffmpeg_infochan.log;
      }
    }
}

user www-data;

worker_processes 4; # воркеры по количеству ядер процессора

pid /run/nginx.pid;

error_log /var/log/nginx/nginx_error.log debug;

env PATH;

events {

worker_connections 768;

}

http {

access_log /var/log/nginx/access.log;

error_log /var/log/nginx/error.log;

include mime.types;

default_type application/octet-stream;

sendfile on;

keepalive_timeout 65;

server {

listen 88;

# rtmp stat

location /stat {

rtmp_stat all;

rtmp_stat_stylesheet stat.xsl;

}

location /stat.xsl {

# you can move stat.xsl to a different location

root /etc/nginx/;

}

location / {

rtmp_control all;

}

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root html;

}

# RTMP proxy

rtmp {

access_log /var/log/nginx/rtmp_access.log;

server {

listen 1935;

ping 30s;

notify_method get;

# ретрансляция без звука

application camera_1 {

live on;

exec_pull ffmpeg_nginx -i http://192.168.2.40:8000/71-camera1 -vcodec copy -f flv -an rtmp://localhost:1935/camera_1/live 2>>/var/log/nginx/ffmpeg_camera_1.log;

}

# конвертируем в меньшее разрешение без звука

application cam_1 {

live on;

exec_pull ffmpeg_nginx -i http://192.168.2.40:8000/71-camera1 -threads 2 -f flv -r 25 -s 800x600 -an rtmp://localhost:1935/cam_1/live 2>>/var/log/nginx/ffmpeg_cam1.log;

}

# и ещё один поток...

application infochan {

live on;

exec_pull ffmpeg_nginx -i http://192.168.2.40:8000/70-infokanal -threads 2 -f flv -r 25 -s 800x600 -an rtmp://localhost:1935/infochan/live 2>>/var/log/nginx/ffmpeg_infochan.log;

}

Проверяем корректность нашего конфига nginx:

root@kubuntu:~# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
root@kubuntu:~#

root@kubuntu:~# nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok

nginx: configuration file /etc/nginx/nginx.conf test is successful

root@kubuntu:~#

Если всё ок, то запускаем nginx:

service nginx start

1	service nginx start

Проверяем льётся ли что-нибудь на порт 1935. Выхлоп должен идти прямо в консоль.

rtmpdump -r "rtmp://127.0.0.1:1935/camera_1/live" -v
rtmpdump -r "rtmp://127.0.0.1:1935/cam_1/live" -v
rtmpdump -r "rtmp://127.0.0.1:1935/infochan/live" -v

rtmpdump -r "rtmp://127.0.0.1:1935/camera_1/live" -v

rtmpdump -r "rtmp://127.0.0.1:1935/cam_1/live" -v

rtmpdump -r "rtmp://127.0.0.1:1935/infochan/live" -v

Если есть выхлоп, то гуд. Приступаем к установке Flash-плеера на сайт. Качаем и распаковываем папку архива на сайт.
Содержимое html-страницы где будет встроен плеер должно иметь следующую структуру:

<script src="/jwplayer/jwplayer.js" type="text/javascript"></script>
<div id="contain">Loading the player ...</div>
<script>
jwplayer("contain").setup({
  autostart:!0,
  height:600,
  width:800,
  modes:[{
   type:"flash",
   src:"/jwplayer/player.swf",
   config:{file:"live",streamer:"rtmp://внешний_ip_сервера_rtmp/infochan",provider:"rtmp"}
  }]
});
</script>

Один комментарий flash, html, html5, ngnix, rtps, rtsp в браузере

Отправка сообщения на email по smtp, в utf8 с телом в html

28.04.2016 Павел Грибов Python

import smtplib   
from email.mime.text import MIMEText
from email.mime.multipart import MIMEMultipart

		 msg = MIMEMultipart('alternative')
		 html_body="Внимание! У вас есть задача (№"+str(id)+") в sbss, которая уже длительное время находится в статусе ожидания! Через 3 дня она будет автоматически закрыта.. <br/><a href=https://oeirfoeriferoife.ru>"+name+"</a>".encode('utf-8')
		 msg.set_charset("utf-8")
		 msg['Subject'] = "Уведомление о длительной задаче №"+str(id);
		 msg['From'] = sbss_from_email
		 msg['To'] = m_arr["email"]		 
		 part = MIMEText(html_body, 'html', 'UTF-8')
		 msg.attach(part)
		 s = smtplib.SMTP(sbss_from_server)
		 s.login(sbss_from_email,sbss_from_pass);
		 s.set_debuglevel(1);
		 s.sendmail(sbss_from_email, m_arr["email"], msg.as_string())
		 s.quit()

import smtplib

from email.mime.text import MIMEText

from email.mime.multipart import MIMEMultipart

msg = MIMEMultipart('alternative')

html_body="Внимание! У вас есть задача (№"+str(id)+") в sbss, которая уже длительное время находится в статусе ожидания! Через 3 дня она будет автоматически закрыта.. <br/><a href=https://oeirfoeriferoife.ru>"+name+"</a>".encode('utf-8')

msg.set_charset("utf-8")

msg['Subject'] = "Уведомление о длительной задаче №"+str(id);

msg['From'] = sbss_from_email

msg['To'] = m_arr["email"]

part = MIMEText(html_body, 'html', 'UTF-8')

msg.attach(part)

s = smtplib.SMTP(sbss_from_server)

s.login(sbss_from_email,sbss_from_pass);

s.set_debuglevel(1);

s.sendmail(sbss_from_email, m_arr["email"], msg.as_string())

s.quit()

Оставить комментарий html, python, smtp, utf8

Пример реализации прогресса на WEB странице

03.10.2014 Павел Грибов PHP, WEB

Задача: показать прогресс..ну например отправки большого количества СМС.

//запускаю таймер с периодическим срабатыванием
          var timer = setInterval(function() {
            //  отображаю прогрессбар                

$("#list2").load('predplatsmssendprogress.php?orgid='+defaultorgid+"&blibase="+$("#blibase").val()+"&grp="+$("#grp").val());                                
            }, 2000);
            // запускаю рассылку СМС
            smstxt=$("#smstext").val();
            $.get("smssend.php?orgid="+defaultorgid+"&blibase="+$("#blibase").val()+"&grp="+$("#grp").val(), { smstxt: smstxt} , function(data){                
                clearInterval(timer);
// рисуем что всё ок
                alert("Работу закончил хозяин");            
            });

//запускаю таймер с периодическим срабатыванием

var timer = setInterval(function() {

// отображаю прогрессбар

$("#list2").load('predplatsmssendprogress.php?orgid='+defaultorgid+"&blibase="+$("#blibase").val()+"&grp="+$("#grp").val());

}, 2000);

// запускаю рассылку СМС

smstxt=$("#smstext").val();

$.get("smssend.php?orgid="+defaultorgid+"&blibase="+$("#blibase").val()+"&grp="+$("#grp").val(), { smstxt: smstxt} , function(data){

clearInterval(timer);

// рисуем что всё ок

alert("Работу закончил хозяин");

});

Оставить комментарий html, javascript, php, progressbar, web, прогресс бар

« 1 2 3 4 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31