I'd like to serve an html page as well as some json to the client without a round-trip that can be processed on the client side. Is this possible? What's the best way of doing this? I've considered sending it in the header but it seems to be frowned upon by some. Any examples are greatly appreciated. Psuedo code:
main(){
...
app.addRequestHandler((req) => req.path == '/user', handler);
}
void handler(req, res) {
var file = new File(myHtmlFile);
res.headers.set(...); //add json here?
res.outputstream... //or here?
...
stream.pipe(res.outputStream);
}
In your html file you can put a tag to be replace before sending as response.
For instance, in your html file :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<input type='hidden' id='datas' value="___JSON_DATAS___"/>
...
</body>
</html>
___JSON_DATAS___ will be replace in your server with something like :
void handler(req, res) {
var file = new File(myHtmlFile);
readStreamAsString(file.openInputStream()).then((fileContent) {
final content = fileContent
.replaceAll("___JSON_DATAS___", htmlEscape(jsonAsString));
res.outputStream.writeAsString(content);
res.outputStream.close();
});
}
String htmlEscape(String text) {
return text.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
}
Future<String> readStreamAsString(InputStream stream) {
final completer = new Completer();
final sb = new StringBuffer();
final sis = new StringInputStream(stream);
sis
..onData = () { sb.add(sis.read()); }
..onClosed = () { completer.complete(sb.toString()); }
..onError = (e) { completer.completeException(e); };
return completer.future;
}
Then, on client side :
import 'dart:html';
import 'dart:json';
main(){
final input = query('#datas') as InputElement;
final datas = JSON.parse(input.value);
//...
}
Related
How can I use a base64 stream in pdf.js inside a Blazor app?
It's easier to use a local path (src="path?file=filePath"), but not good documented how to handle a pdf stream.
Download, unpack and implement pdf.js in your blazor app in wwwroot/lib.
Add at index.html
<script type="text/javascript" src="lib/pdfjs/build/pdf.js"></script>
<script type="text/javascript">
function loadPdf(base64Data) {
try {
var pdfjsframe = document.getElementById('pdfViewer');
if (!base64Data == "") {
pdfjsframe.contentWindow.PDFViewerApplication.open(base64Data);
}
} catch (error) { console.error("Error at pdfjsframe.contentWindow.PDFViewerApplication.open(base64Data)"); }
}
</script>
Add at your page or component.razor:
<iframe id="pdfViewer" src="/lib/pdfjs/web/viewer.html"></iframe>
and in the cs:
public partial class PdfViewerComponent
{
[Parameter]
public int DocumentNumber { get; set; }
private string _stream = "";
protected override async Task OnParametersSetAsync()
{
_stream = await HttpClientService.GetDocumentStreamById(DocumentNumber);
if (!string.IsNullOrEmpty(_stream))
await OpenDocument(_stream);
_stream = ""; // that will ensure that your loading the right pdf at the right time
}
private async Task OpenDocument(string stream)
{
await JSRuntime.InvokeVoidAsync("loadPdf", stream);
}
}
In this example the _stream comes from a API. Put in the property _stream your stream string wherever you will get it from.
I want a grails application in which server sends some message at a fixed interval.
I have tried using spring-websocket plugin in grails, server and client are able to connect but that doesn't fullfill my requirement. i.e., I want, server sends some message at a fixed interval.
This is the server-side code :
package test
import org.springframework.messaging.handler.annotation.MessageMapping
import org.springframework.messaging.handler.annotation.SendTo
class ExampleController {
def index() { }
// server
#MessageMapping("/hello")
#SendTo("/topic/hello")
protected String hello(String world) {
List<String> list = new ArrayList<>();
BufferedReader file = new BufferedReader(new FileReader("src/main/resources/dummyLog.txt"));
file.eachLine {line ->
list.add(line)
}
int idx = (int)(Math.random() * list.size());
println idx;
return list.get(idx);
}
}
And this is the client-side code :
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
var socket = new SockJS("${createLink(uri: '/stomp')}");
var client = webstomp.over(socket);
client.connect({}, function() {
client.subscribe("/topic/hello", (message) => {
document.getElementById('helloDiv').append(message.body);
});
});
document.getElementById('helloButton').addEventListener('click', () => {
client.send("/app/hello", JSON.stringify("world"));
});
});
</script>
Thanks.
I'm using html2canvas to take screenshot of a div and then upload it to the server. After the image is saved on the server, the page on client refreshes. And that is something I don't want. This is the code, that saves the picture:
public void SaveImage(string imageString, int id)
{
string s = imageString.Replace("data:image/png;base64,", "");
byte[] imageB = Convert.FromBase64String(s);
var filePath = Path.Combine(Server.MapPath("~/screens/" + id));
Directory.CreateDirectory(filePath);
using (var ms = new MemoryStream(imageB))
{
using (var image = Image.FromStream(ms))
{
image.Save(filePath + "/screen.png", ImageFormat.Png);
}
}
}
This is the Javascript code
html2canvas(document.querySelector("#screen")).then(function (canvas) {
var data = canvas.toDataURL("image/png");
$.ajax({
url: '#Url.Action("SaveImage")',
type: 'POST',
data: { imageString: data, id: #ViewBag.id },
dataType: 'json'
});
});
I have tried some advices I found online like preventDefault() in jQuery. But that's about it. I feel like all the other issues and solutions does not affect me.
EDIT: Simple HTML that refreshes the page too
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/html2canvas.js"></script>
<script>
$(document).ready(function () {
html2canvas(document.querySelector("#screen")).then(function (canvas) {
var data = canvas.toDataURL("image/png");
$.ajax({
url: '#Url.Action("SaveImage")',
type: 'POST',
data: { imageString: data, id: 2 },
dataType: 'json',
});
});
});
</script>
</head>
<body>
<div id="screen">Some text</div>
</body>
</html>
EDIT 1: The whole controller with SaveImage method
using System;
using System.Linq;
using System.Web.Mvc;
using Microsoft.AspNet.Identity;
using BcVnc.Models;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
namespace BcVnc.Controllers
{
[Authorize(Roles = "Admin, User")]
public class ConnectionController : Controller
{
private ApplicationDbContext db = new ApplicationDbContext();
// GET: Connection
public ActionResult Index(int id, bool viewOnly)
{
int access = checkUserAccess(id, viewOnly);
if(access != 0)
{
ViewBag.id = id;
if (access == 1 & viewOnly == true)
ViewBag.viewOnly = true.ToString().ToLower();
else if(access == 1 && viewOnly == false)
ViewBag.viewOnly = false.ToString().ToLower();
else
ViewBag.viewOnly = true.ToString().ToLower();
return View();
}
else
{
return View("Error");
}
}
private int checkUserAccess(int id, bool viewOnly)
{
var userId = User.Identity.GetUserId();
var userDevice = db.UserDevices.Where(ud => ud.UserId == userId).FirstOrDefault(ud => ud.DeviceId == id);
var device = db.Devices.FirstOrDefault(d => d.Id == id);
ViewBag.name = device.Name;
if (userDevice == null)
return 0;
else
{
if (userDevice.ViewOnly == false)
return 1;
else
return -1;
}
}
public void SaveImage(string imageString, int id)
{
string s = imageString.Replace("data:image/png;base64,", "");
byte[] imageB = Convert.FromBase64String(s);
var filePath = Path.Combine(Server.MapPath("~/screens/" + id));
Directory.CreateDirectory(filePath);
using (var ms = new MemoryStream(imageB))
{
using (var image = Image.FromStream(ms))
{
image.Save(filePath + "/screen.png", ImageFormat.Png);
}
}
}
}
}
Not sure how come I was not able to find this before, but the whole problem was in Visual Studio settings. The refresh probably would not happen outside the localhost: Refresh in browser when uploading mvc file c #
After changing that in settings, no refresh anymore.
For instance:
I have a html file and a JavaScript file. If two file open directly with browser. It can be work.
If put these file to Vaadin Frame and use #JavaScript annotation running, it only shows a static html.
Only need communication between JavaScript and html page, no need with server.
here my code
Html(example.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Js Test Uses</title>
<script type="text/javascript" src="mylibrary.js"></script>
</head>
<body>
<div id="foo"></div>
<script type="text/javascript">
window.foo = new mylibrary.MyComponent(document.getElementById("foo"));
window.foo.click = function () {
alert("Value is " + this.getValue());
}
</script>
</body>
</html>
mylibrary.js
var mylibrary = mylibrary || {};
mylibrary.MyComponent = function (element) {
element.innerHTML = "<div class='caption'>Hello, kitty!</div>"
+ "<div class='textinput'>Enter a value: "
+ "<input type='text' name='value'/>"
+ "<input type='button' value='Click'/>"
+ "</div>";
element.style.border="thin solid red";
element.style.display="inline-block";
this.getValue = function() {
return element.getElementsByTagName("input")[0].value;
};
this.setValue = function (value) {
element.getElementsByTagName("input")[0].value = value;
};
this.click = function () {
alert("Error: Must implement click() method");
};
var button = element.getElementsByTagName("input")[1];
var self = this;
button.onclick = function () {
self.click();
};
};
Vaadin (MyUI.java):
#Theme("mytheme")
#JavaScript("mylibrary.js")
public class MyUI extends UI {
private static final long serialVersionUID = -6891373465168098637L;
#Override
protected void init(VaadinRequest vaadinRequest) {
CustomLayout layout = null;
try {
layout = new CustomLayout(MyUI.class.getResourceAsStream("examples.html"));
} catch (IOException e) {
e.printStackTrace();
}
setContent(layout);
}
#WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
#VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
private static final long serialVersionUID = -9170703857949837824L;
}
}
this is my project package explorer image, is a initial project.
this is my project source(zip)
I am afraid it is not possible the way you want. See for example this answer.
Annotation #JavaScript has a bit different purpose. It enables you to call script from Vaadin server side code.
For using #JavaScript see this answer. Pay attention especially to the path the script is included.
So basically #JavaScript allows you to do things like
com.vaadin.ui.JavaScript.getCurrent().execute("hello()");
where hello() is a function declared in a javascript you include with #JavaScript
I am trying to upload a file in Dart with this code
Reading the file
dom.InputElement uploadInput = dom.querySelector('#upload');
uploadInput.onChange.listen((dom.Event e)
{
// read file content as dataURL
final files = uploadInput.files;
if (files.length == 1)
{
final file = files[0];
final reader = new dom.FileReader();
reader.onLoad.listen((_)
{
dataRequest('upload', reader.result);
});
reader.readAsDataUrl (file);
}
});
Sending the file
Future<dom.HttpRequest> dataRequest (String path, dynamic data)
{
return dom.HttpRequest.request (path, method: "POST",
sendData: data);
}
But I get this error
POST http://localhost:9090/upload 400 (Bad Request) :9090/upload:1
Instance of '_XMLHttpRequestProgressEvent'
STACKTRACE:
null
I receive it in Redstone like this
#app.Route("/upload", methods: const [app.POST], allowMultipartRequest: true)
#Encode()
upload(#app.Body(app.FORM) Map form)
{
var file = form["file"];
print(file.filename);
print(file.contentType);
print(file.runtimeType);
return new Resp()
..success = (file.filename != null);
}
Any ideas?
Dart: 1.9.1
Redstone: 0.5.21
Let's say you have the following html:
<!DOCTYPE html>
<html>
<head>
<title>send_file.html</title>
</head>
<body>
<form id="read">
user: <input type="text" name='user' value='DefaultValue'>
<input type="file" id="file" name="my_file"/> <br>
<input type="button" id="whole_btn" value="Send whole form!">
<input type="button" id="specific_btn" value="Send specific values!">
</form>
<script type="application/dart" src="send_file.dart"></script>
</body>
</html>
Redstone server file:
import 'dart:io';
import 'package:logging/logging.dart';
import 'package:redstone/server.dart' as app;
import 'package:shelf_static/shelf_static.dart';
#app.ErrorHandler(HttpStatus.NOT_FOUND)
handleNotFoundError() => app.redirect("not_found.html");
#app.Route('/post',methods: const [app.POST], allowMultipartRequest: true)
wholeFormPost(#app.Body(app.FORM) Map form) {
var user = form['user'];
var f = form['my_file'];
print('user: $user \n file: \n ${f.content}');
}
#app.Route('/post1',methods: const [app.POST], allowMultipartRequest: true)
specificPost(#app.Body(app.FORM) Map form) {
var specificField = form['specificField'];
var f = form['my_file'];
print('specificField: $specificField \n file: \n ${f.content}');
}
#app.Interceptor(r'/.*')
interceptor1() {
if (app.request.method == 'OPTIONS') {
app.response = app.response.change(headers: CORS);
app.chain.interrupt();
} else {
app.chain.next(() {
return app.response = app.response.change(headers: CORS );
});
}
}
Map CORS = {
"Access-Control-Allow-Origin" : "*, ",
"Access-Control-Allow-Methods": "POST, GET, OPTIONS",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Content-Disposition"
};
main() {
app.setShelfHandler(createStaticHandler("/home/raz2/dartProjects_linux_1/PR5/cl2/lib",
defaultDocument: 'send_file.html',
serveFilesOutsidePath: true));
app.setupConsoleLog(Level.ALL);
app.start(address: "0.0.0.0", port: 8081);
}
The client dart file: send_file.dart
import 'dart:html';
class UploadFileEx {
FormElement _readForm;
InputElement _fileInput;
File file;
ButtonElement _wholeBtn;
ButtonElement _specificBtn;
UploadFileEx() {
_readForm = document.querySelector('#read');
_fileInput =
document.querySelector('#file')
..onChange.listen(_onFileInputChange);
_wholeBtn =
document.querySelector('#whole_btn')
..onClick.listen((sendForm));
_specificBtn =
document.querySelector('#specific_btn')
..onClick.listen((sendFileAndField));
}
_onFileInputChange(_) {
file = _fileInput.files[0];
}
// Send the whole form
void sendForm(_) {
if(file == null)
return;
FormData fd = new FormData(_readForm);
HttpRequest req = new HttpRequest();
req.open("POST", 'http://127.0.0.1:8081/post');
req.send(fd);
}
// add my own field to FormData
void sendFileAndField(_) {
if(file == null)
return;
FormData fd = new FormData();
fd.append('specificField', 'Lalala');
fd.appendBlob('my_file', file);
HttpRequest req = new HttpRequest();
req.open("POST",'http://127.0.0.1:8081/post1');
req.send(fd);
}
}
void main() {
new UploadFileEx();
}
Should work.
Check out this link for more info: Sending_forms_through_JavaScript