I’ve decided to learn Rust alongside Web Assembly to get into more cloud computing. I’m trying to make a Rust app that connects to a Redis cache and increments a value each time a function is called. I then want to export that function with the wasm-bindgen to use it with JavaScript in a website that will call the function each time the website is refreshed and display the value on screen. Here is my current rust code:
use redis::{Client, Commands};
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn increment_counter() -> i32 {
let client: Client = Client::open("redis://127.0.0.1/").unwrap();
let mut con: redis::Connection = client.get_connection().unwrap();
let key: &str = "counter";
let value: i32 = con.get(key).unwrap_or(0);
let new_value: i32 = value + 1;
let _: () = con.set(key, new_value).unwrap();
new_value
}
and here is my HTML & JS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Increment Value Example</title>
</head>
<body>
<h1>Current value:</h1>
<div id="counter"></div>
<script type="module">
import { increment_counter } from "./pkg/increment.js";
const counterElement = document.getElementById("counter");
function updateCounter() {
const count = increment_counter();
counterElement.textContent = count;
}
updateCounter();
</script>
</body>
</html>
I’ve been compiling the rust code with wasm-pack build --target web
and trying to use the increment.js file that makes. I host the server with http-server from npm but get this error in the browser:
Uaught SyntaxError: The requested module './pkg/increment.js' does not provide an export named 'increment_counter' (at (index):11:10)
But I think the rust code does export the function correctly with wasm-bindgen and I get no errors/warnings from the compiler so I am really confused as to where I am going wrong.
Any help is much appreciated!
2
Answers
'./pkg/increment.js'
exports a default function that must be called before you can use any of the exported functions. Here is an example:this will create
pkg
folder and inside you will javascript file.pkg
is a different module, your front end is a different module. to reach out topkg
, i think you should add it to thepackage.json
inside your front end project.in your front end