How to get all the NFTs for Metaplex Candy Machine without using the Metaplex JS SDK? - solana

I want to fetch all the NFT lists for the candy machine.
Of course, if we use the Metaplex JS SDK it will be easy.
But I'd love to fetch NFTs by using Solana Web3 APIs.

There is a great answer here already: https://stackoverflow.com/a/70601874/18965981
What you have to do is run a GPA against the candy machine v2 program to find all the mint addresses.
import { Connection, clusterApiUrl, PublicKey } from '#solana/web3.js';
import bs58 from 'bs58';
const connection = new Connection(clusterApiUrl('mainnet-beta'));
const MAX_NAME_LENGTH = 32;
const MAX_URI_LENGTH = 200;
const MAX_SYMBOL_LENGTH = 10;
const MAX_CREATOR_LEN = 32 + 1 + 1;
const MAX_CREATOR_LIMIT = 5;
const MAX_DATA_SIZE = 4 + MAX_NAME_LENGTH + 4 + MAX_SYMBOL_LENGTH + 4 + MAX_URI_LENGTH + 2 + 1 + 4 + MAX_CREATOR_LIMIT * MAX_CREATOR_LEN;
const MAX_METADATA_LEN = 1 + 32 + 32 + MAX_DATA_SIZE + 1 + 1 + 9 + 172;
const CREATOR_ARRAY_START = 1 + 32 + 32 + 4 + MAX_NAME_LENGTH + 4 + MAX_URI_LENGTH + 4 + MAX_SYMBOL_LENGTH + 2 + 1 + 4;
const TOKEN_METADATA_PROGRAM = new PublicKey('metaqbxxUerdq28cj1RbAWkYQm3ybzjb6a8bt518x1s');
const CANDY_MACHINE_V2_PROGRAM = new PublicKey('cndy3Z4yapfJBmL3ShUp5exZKqR3z33thTzeNMm2gRZ');
const candyMachineId = new PublicKey('ENTER_YOUR_CANDY_MACHINE_ID_HERE');
const getMintAddresses = async (firstCreatorAddress: PublicKey) => {
const metadataAccounts = await connection.getProgramAccounts(
TOKEN_METADATA_PROGRAM,
{
// The mint address is located at byte 33 and lasts for 32 bytes.
dataSlice: { offset: 33, length: 32 },
filters: [
// Only get Metadata accounts.
{ dataSize: MAX_METADATA_LEN },
// Filter using the first creator.
{
memcmp: {
offset: CREATOR_ARRAY_START,
bytes: firstCreatorAddress.toBase58(),
},
},
],
},
);
return metadataAccounts.map((metadataAccountInfo) => (
bs58.encode(metadataAccountInfo.account.data)
));
};
const getCandyMachineCreator = async (candyMachine: PublicKey): Promise<[PublicKey, number]> => (
PublicKey.findProgramAddress(
[Buffer.from('candy_machine'), candyMachine.toBuffer()],
CANDY_MACHINE_V2_PROGRAM,
)
);
(async () => {
const candyMachineCreator = await getCandyMachineCreator(candyMachineId);
getMintAddresses(candyMachineCreator[0]);
})();

Related

Implement Socket.io like provider using NestJS

I am new using NestJS, and I want to implement Socket.io like provider using NestJS.
I have this codes, but I am not sure how I need to do right the socket.module with provider:
socket.gateway.ts
import { Server } from 'socket.io';
import * as express from 'express';
import { createServer } from 'http';
import { WebSocketGateway, WebSocketServer } from '#nestjs/websockets';
import { Inject, Injectable } from '#nestjs/common';
const app = express();
const server = createServer(app);
const io = new Server(server);
interface IPlayer {
name: string;
position: { x: number; y: number; z: number };
rotation: { x: number; y: number; z: number };
health: number;
}
interface IEnemySpawnPoint {
position: { x: number; y: number; z: number };
rotation: { x: number; y: number; z: number };
}
#Injectable()
#WebSocketGateway()
export class SocketGateway {
#WebSocketServer()
SocketGateway(): void {
// global variables for the server
let enemies: IPlayer[] = [];
let playerSpawnPoints: IPlayer[] = [];
let clients: IPlayer[] = [];
io.on('connection', function (socket) {
let currentPlayer: IPlayer = {
name: 'unknown',
position: { x: 0, y: 0, z: 0 },
rotation: { x: 0, y: 0, z: 0 },
health: 0,
};
currentPlayer.name = 'unknown';
socket.on('player connect', function () {
console.log(currentPlayer.name + ' recv: player connect');
for (let i = 0; i < clients.length; i++) {
const playerConnected = {
name: clients[i].name,
position: clients[i].position,
rotation: clients[i].position,
health: clients[i].health,
};
// in your current game, we need to tell you about the other players.
socket.emit('other player connected', playerConnected);
console.log(
currentPlayer.name +
' emit: other player connected: ' +
JSON.stringify(playerConnected),
);
}
});
socket.on('play', function (data) {
console.log(
currentPlayer.name + ' recv: play: ' + JSON.stringify(data),
);
// if this is the first person to join the game init the enemies
let numberOfEnemies;
if (clients.length === 0) {
numberOfEnemies = data.enemySpawnPoints.length;
enemies = [];
data.enemySpawnPoints.forEach(function (
enemySpawnPoint: IEnemySpawnPoint,
) {
const enemy = {
name: guid(),
position: enemySpawnPoint.position,
rotation: enemySpawnPoint.rotation,
health: 100,
};
enemies.push(enemy);
});
playerSpawnPoints = [];
data.playerSpawnPoints.forEach(function (
_playerSpawnPoint: IEnemySpawnPoint,
) {
const playerSpawnPoint = {
name: guid(),
position: _playerSpawnPoint.position,
rotation: _playerSpawnPoint.rotation,
health: 100,
};
playerSpawnPoints.push(playerSpawnPoint);
});
}
const enemiesResponse = {
enemies: enemies,
};
// we always will send the enemies when the player joins
console.log(
currentPlayer.name +
' emit: enemies: ' +
JSON.stringify(enemiesResponse),
);
socket.emit('enemies', enemiesResponse);
const randomSpawnPoint =
playerSpawnPoints[
Math.floor(Math.random() * playerSpawnPoints.length)
];
currentPlayer = {
name: data.name,
position: randomSpawnPoint.position,
rotation: randomSpawnPoint.rotation,
health: 100,
};
clients.push(currentPlayer);
// in your current game, tell you that you have joined
console.log(
currentPlayer.name + ' emit: play: ' + JSON.stringify(currentPlayer),
);
socket.emit('play', currentPlayer);
// in your current game, we need to tell the other players about you.
socket.broadcast.emit('other player connected', currentPlayer);
});
socket.on('player move', function (data) {
console.log('recv: move: ' + JSON.stringify(data));
currentPlayer.position = data.position;
socket.broadcast.emit('player move', currentPlayer);
});
socket.on('player turn', function (data) {
console.log('recv: turn: ' + JSON.stringify(data));
currentPlayer.rotation = data.rotation;
socket.broadcast.emit('player turn', currentPlayer);
});
socket.on('player shoot', function () {
console.log(currentPlayer.name + ' recv: shoot');
const data = {
name: currentPlayer.name,
};
console.log(
currentPlayer.name + ' bcst: shoot: ' + JSON.stringify(data),
);
socket.emit('player shoot', data);
socket.broadcast.emit('player shoot', data);
});
socket.on('health', function (data) {
console.log(
currentPlayer.name + ' recv: health: ' + JSON.stringify(data),
);
// only change the health once, we can do this by checking the originating player
if (data.from === currentPlayer.name) {
let indexDamaged = 0;
if (!data.isEnemy) {
clients = clients.map(function (client, index) {
if (client.name === data.name) {
indexDamaged = index;
client.health -= data.healthChange;
}
return client;
});
} else {
enemies = enemies.map(function (enemy, index) {
if (enemy.name === data.name) {
indexDamaged = index;
enemy.health -= data.healthChange;
}
return enemy;
});
}
const response = {
name: !data.isEnemy
? clients[indexDamaged].name
: enemies[indexDamaged].name,
health: !data.isEnemy
? clients[indexDamaged].health
: enemies[indexDamaged].health,
};
console.log(
currentPlayer.name + ' bcst: health: ' + JSON.stringify(response),
);
socket.emit('health', response);
socket.broadcast.emit('health', response);
}
});
socket.on('message', function (message) {
console.log('message', message);
socket.emit('message', message);
});
socket.on('disconnect', function () {
console.log(
currentPlayer.name + ' recv: disconnect ' + currentPlayer.name,
);
socket.broadcast.emit('other player disconnected', currentPlayer);
console.log(
currentPlayer.name +
' bcst: other player disconnected ' +
JSON.stringify(currentPlayer),
);
for (let i = 0; i < clients.length; i++) {
if (clients[i].name === currentPlayer.name) {
clients.splice(i, 1);
}
}
});
});
console.log('--- server is running ...', process.env.PORT || 80);
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return (
s4() +
s4() +
'-' +
s4() +
'-' +
s4() +
'-' +
s4() +
'-' +
s4() +
s4() +
s4()
);
}
}
}
socket.module.ts
import { Module } from '#nestjs/common';
import { SocketGateway } from '#src/socket/socket.gateway';
#Module({
providers: [
{
provide: 'SOCKET_CONNECTION',
useFactory: async (): Promise<SocketGateway> => {
return new SocketGateway();
},
},
],
})
export class SocketModule {}
main.ts
import { NestFactory } from '#nestjs/core';
import { AppModule } from './app.module';
import { Transport } from '#nestjs/microservices';
import { join } from 'path';
import helmet from 'helmet';
import { DocumentBuilder, SwaggerModule } from '#nestjs/swagger';
import * as dotenv from 'dotenv';
// import { Server } from 'http';
import { Server } from 'socket.io';
import * as express from 'express';
import { createServer } from 'http';
dotenv.config({ path: '.env' });
async function bootstrap(): Promise<void> {
const microservice = await NestFactory.createMicroservice(AppModule, {
transport: Transport.GRPC,
options: {
package: 'engine',
protoPath: join(__dirname, 'engine.proto'),
},
});
const app = await NestFactory.create(AppModule);
const config = new DocumentBuilder()
.setTitle('Engine')
.setDescription('The engine API description')
.setVersion('v1')
.build();
const document = SwaggerModule.createDocument(app, config);
SwaggerModule.setup('swagger', app, document);
const allowedOrigin = new RegExp(
JSON.parse(process.env.ALLOWED_ORIGIN).join('|'),
);
app.enableCors({
origin: allowedOrigin,
optionsSuccessStatus: 200,
});
app.use(helmet());
app.setGlobalPrefix('v1/api/', {
exclude: ['/health'],
});
await microservice.listen();
const expressApp = express();
const server = createServer(expressApp);
const io = new Server(server);
// set up the socket.io server to use the same port as the HTTP server
const PORT = process.env.PORT || 3000;
await app.listen(PORT);
}
bootstrap();
I tried many things but I thwy usually had errors, or didn't work. I am not sure if I did all right, so I will be glad to all kind of help and solutions.
I need to use socket.io, not websocket

Overwrite cypress commands to include a wait before they are run

I am trying to overwrite Cypress commands such as click, type and should to include some waiting time before they are executed. My motivation for this is that I want to highlight the areas the test interacts with in the produced video, so in click I would like to say for example: "Display circle where the click will happen, wait 500ms, click, wait 250ms, remove circle".
The wait-part of this of this is what causes me trouble.
Google suggests I do something like this:
Cypress.Commands.overwrite('click', function (originalFN) {
const originalParams = [...arguments].slice(1);
cy.wait(500).then(() => originalFN.apply(originalFN, originalParams));
});
And I think this works for normal clicks(), but it causes the type command to fail entirely saying this: Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.
It seems type() internally calls click in a way that prevents me from using wait() inside click.
Is there any way around this?
I've found a solution in the code of a library to slow down cypress, the key is to overwrite the internal runCommand cypress function. This allows me to do what I want on click and type. Should is still an open question, but not as important. Code below is my function to patch cypress, which I call right before my tests.
export function patchCypressForVideoRecording(cy: any, Cypress: any, speedFactor = 1) {
const colorClick = 'rgba(255, 50, 50, 0.8)';
const colorType = 'rgba(50, 255, 50, 0.8)';
const colorShould = 'rgba(50, 50, 255, 0.8)';
const waitTime = 600;
const highlightArea = (rect: any, clr: string, scale: boolean) => {
const x = Math.round(rect.x);
const y = Math.round(rect.y);
const w = Math.round(rect.width);
const h = Math.round(rect.height);
// cy.window() breaks in commands like click due to promise-inside promises stuff
// this window reference is just there and allows to run synchronous side-effects js without cypress noticing it
const hackWindow = (cy as any).state('window');
hackWindow.eval(`
const time = ${waitTime / speedFactor};
const x = ${x};
const y = ${y};
const highlightElement = document.createElement('div');
highlightElement.style.backgroundColor = '${clr}';
highlightElement.style.position = 'fixed';
highlightElement.style.zIndex = '999';
highlightElement.style['pointer-events'] = 'none';
document.body.appendChild(highlightElement);
const scaleElement = (p) => {
if (${scale}) {
const psq = p;
const scale = (0.1 + ((psq < 0.5 ? (1 - psq) : psq)));
const w = scale * ${w};
const h = scale * ${h};
const wLoss = ${w} - w;
const hLoss = ${h} - h;
const x = ${x} + wLoss / 2;
const y = ${y} + hLoss / 2;
return {x, y, w, h};
} else {
const w = ${w};
const h = ${h};
const x = ${x};
const y = ${y};
return {x, y, w, h};
}
};
const newSize = scaleElement(0);
highlightElement.style.top = newSize.y + 'px';
highlightElement.style.left = newSize.x + 'px';
highlightElement.style.width = newSize.w + "px";
highlightElement.style.height = newSize.h + "px";
const tickSize = 30;
let op = 1;
let prog = 0;
const fadeIv = setInterval(() => {
prog += tickSize;
const p = Math.min(1, prog / time);
let op = 1-(p*0.5);
highlightElement.style.opacity = op + '';
const newSize = scaleElement(p);
highlightElement.style.top = newSize.y + 'px';
highlightElement.style.left = newSize.x + 'px';
highlightElement.style.width = newSize.w + "px";
highlightElement.style.height = newSize.h + "px";
}, tickSize);
setTimeout(() => {
clearInterval(fadeIv);
document.body.removeChild(highlightElement);
}, time);
`);
};
const highlightInteractedElements = (firstParam: any, clr: string, scale: boolean) => {
if (firstParam != null && firstParam.length != null && firstParam.length > 0 && typeof firstParam !== 'string') {
for (let i = 0; i < firstParam.length; i++) {
const elem = firstParam[i];
if (elem != null && 'getBoundingClientRect' in elem && typeof elem['getBoundingClientRect'] === 'function') {
highlightArea(elem.getBoundingClientRect(), clr, scale);
}
}
}
};
// To figure out the element that is clicked/typed in need to wait until
// the selector right before click/type has a subject element
const waitAndDisplay = (x: any, clr: string) => {
if (x.state === 'passed') {
highlightInteractedElements(x.attributes.subject, clr, true);
} else {
if (x.attributes.prev.state === 'queued') {
setTimeout(() => {
waitAndDisplay(x, clr);
}, 15);
} else {
highlightInteractedElements(x.attributes.prev.attributes.subject, clr, true);
}
}
};
const cqueue = (cy as any).queue;
const rc = cqueue.runCommand.bind(cqueue);
cqueue.runCommand = (cmd: any) => {
let delay = 50;
if (cmd.attributes.name === 'click') {
waitAndDisplay(cmd, colorClick);
delay = waitTime / 2;
}
if (cmd.attributes.name === 'type') {
waitAndDisplay(cmd, colorType);
delay = waitTime;
}
return Cypress.Promise.delay(delay / speedFactor)
.then(() => rc(cmd))
.then(() => Cypress.Promise.delay(delay / speedFactor));
};
Cypress.Commands.overwrite('should', function (originalFN: any) {
const originalParams = [...arguments].slice(1);
highlightInteractedElements(originalParams[0], colorShould, false);
return originalFN.apply(originalFN, originalParams);
});
}

Three.js glb models are showing up black

I am trying to render a glb 3d model using Three.js. I am new to Three.js, and all of my models are coming up black. Here is my code:
import { useState, useEffect, useRef, useCallback } from 'react'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { loadGLTFModel } from '../lib/model'
import { DogSpinner, DogContainer } from './voxel-dog-loader'
function easeOutCirc(x) {
return Math.sqrt(1 - Math.pow(x - 1, 4))
}
const VoxelDog = () => {
const refContainer = useRef()
const [loading, setLoading] = useState(true)
const [renderer, setRenderer] = useState()
const [_camera, setCamera] = useState()
const [target] = useState(new THREE.Vector3(-0.5, 1.2, 0))
const [initialCameraPosition] = useState(
new THREE.Vector3(
20 * Math.sin(0.2 * Math.PI),
10,
20 * Math.cos(0.2 * Math.PI)
)
)
const [scene] = useState(new THREE.Scene())
const [_controls, setControls] = useState()
const handleWindowResize = useCallback(() => {
const { current: container } = refContainer
if (container && renderer) {
const scW = container.clientWidth
const scH = container.clientHeight
renderer.setSize(scW, scH)
}
}, [renderer])
/* eslint-disable react-hooks/exhaustive-deps */
useEffect(() => {
const { current: container } = refContainer
if (container && !renderer) {
const scW = container.clientWidth
const scH = container.clientHeight
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
})
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(scW, scH)
renderer.outputEncoding = THREE.sRGBEncoding
container.appendChild(renderer.domElement)
setRenderer(renderer)
// 640 -> 240
// 8 -> 6
const scale = scH * 0.005 + 4.8
const camera = new THREE.OrthographicCamera(
-scale,
scale,
scale,
-scale,
0.01,
50000
)
camera.position.copy(initialCameraPosition)
camera.lookAt(target)
setCamera(camera)
const ambientLight = new THREE.AmbientLight(0xcccccc, 1)
scene.add(ambientLight)
const controls = new OrbitControls(camera, renderer.domElement)
controls.autoRotate = true
controls.target = target
setControls(controls)
loadGLTFModel(scene, '/MacbookPro.obj', {
receiveShadow: false,
castShadow: false
}).then(() => {
animate()
setLoading(false)
})
let req = null
let frame = 0
const animate = () => {
req = requestAnimationFrame(animate)
frame = frame <= 100 ? frame + 1 : frame
if (frame <= 100) {
const p = initialCameraPosition
const rotSpeed = -easeOutCirc(frame / 120) * Math.PI * 20
camera.position.y = 10
camera.position.x =
p.x * Math.cos(rotSpeed) + p.z * Math.sin(rotSpeed)
camera.position.z =
p.z * Math.cos(rotSpeed) - p.x * Math.sin(rotSpeed)
camera.lookAt(target)
} else {
controls.update()
}
renderer.render(scene, camera)
}
return () => {
console.log('unmount')
cancelAnimationFrame(req)
renderer.dispose()
}
}
}, [])
useEffect(() => {
window.addEventListener('resize', handleWindowResize, false)
return () => {
window.removeEventListener('resize', handleWindowResize, false)
}
}, [renderer, handleWindowResize])
return (
<DogContainer ref={refContainer}>{loading && <DogSpinner />}</DogContainer>
)
}
export default VoxelDog
I thought it may be an issue with the models themselves, but it has happened with multiple different models so I'm starting to think it may be an issue with how I am rendering the models.
Does anyone have any suggestions? Thank you!

How to find all NFTs minted from a v2 candy machine

I'm minting Solana NFTs. Candy machine v2 was recently released and v1 is deprecated.
If I create a v2 candy machine and mint some NFTs, how can I later find the hashes from all the tokens that were minted?
If you have the candy machine id, you can find all mints with this:
import { Connection } from '#metaplex/js';
import { Metadata, MetadataProgram } from '#metaplex-foundation/mpl-token-metadata';
const connection = new Connection('mainnet-beta');
const MAX_NAME_LENGTH = 32;
const MAX_URI_LENGTH = 200;
const MAX_SYMBOL_LENGTH = 10;
const MAX_CREATOR_LEN = 32 + 1 + 1;
const candyMachineId: string = 'BdNtsrV26ZHdqDFxmDfLib6CrcUNj4ePorhppHreRgER';
export async function fetchHashTable(hash: string){
const metadataAccounts = await MetadataProgram.getProgramAccounts(
connection,
{
filters: [
{
memcmp: {
offset:
1 +
32 +
32 +
4 +
MAX_NAME_LENGTH +
4 +
MAX_URI_LENGTH +
4 +
MAX_SYMBOL_LENGTH +
2 +
1 +
4 +
0 * MAX_CREATOR_LEN,
bytes: hash,
},
},
],
},
)
const mintHashes: any = []
for (let index = 0; index < metadataAccounts.length; index++) {
const account = metadataAccounts[index];
const accountInfo: any = await connection.getParsedAccountInfo(account.pubkey);
const metadata = new Metadata(hash.toString(), accountInfo.value);
mintHashes.push(metadata.data.mint)
}
console.log(mintHashes)
}
fetchHashTable(candyMachineId)
You can find this and more on the solana cookbook
EDIT: The above was for Candy Machine V1.
For Candy Machine V2, you would do the following:
import { Connection, clusterApiUrl, PublicKey } from '#solana/web3.js';
import bs58 from 'bs58';
const connection = new Connection(clusterApiUrl('mainnet-beta'));
const MAX_NAME_LENGTH = 32;
const MAX_URI_LENGTH = 200;
const MAX_SYMBOL_LENGTH = 10;
const MAX_CREATOR_LEN = 32 + 1 + 1;
const MAX_CREATOR_LIMIT = 5;
const MAX_DATA_SIZE = 4 + MAX_NAME_LENGTH + 4 + MAX_SYMBOL_LENGTH + 4 + MAX_URI_LENGTH + 2 + 1 + 4 + MAX_CREATOR_LIMIT * MAX_CREATOR_LEN;
const MAX_METADATA_LEN = 1 + 32 + 32 + MAX_DATA_SIZE + 1 + 1 + 9 + 172;
const CREATOR_ARRAY_START = 1 + 32 + 32 + 4 + MAX_NAME_LENGTH + 4 + MAX_URI_LENGTH + 4 + MAX_SYMBOL_LENGTH + 2 + 1 + 4;
const TOKEN_METADATA_PROGRAM = new PublicKey('metaqbxxUerdq28cj1RbAWkYQm3ybzjb6a8bt518x1s');
const CANDY_MACHINE_V2_PROGRAM = new PublicKey('cndy3Z4yapfJBmL3ShUp5exZKqR3z33thTzeNMm2gRZ');
const candyMachineId = new PublicKey('ENTER_YOUR_CANDY_MACHINE_ID_HERE');
const getMintAddresses = async (firstCreatorAddress: PublicKey) => {
const metadataAccounts = await connection.getProgramAccounts(
TOKEN_METADATA_PROGRAM,
{
// The mint address is located at byte 33 and lasts for 32 bytes.
dataSlice: { offset: 33, length: 32 },
filters: [
// Only get Metadata accounts.
{ dataSize: MAX_METADATA_LEN },
// Filter using the first creator.
{
memcmp: {
offset: CREATOR_ARRAY_START,
bytes: firstCreatorAddress.toBase58(),
},
},
],
},
);
return metadataAccounts.map((metadataAccountInfo) => (
bs58.encode(metadataAccountInfo.account.data)
));
};
const getCandyMachineCreator = async (candyMachine: PublicKey): Promise<[PublicKey, number]> => (
PublicKey.findProgramAddress(
[Buffer.from('candy_machine'), candyMachine.toBuffer()],
CANDY_MACHINE_V2_PROGRAM,
)
);
(async () => {
const candyMachineCreator = await getCandyMachineCreator(candyMachineId);
getMintAddresses(candyMachineCreator[0]);
})();
Make sure you replace ENTER_YOUR_CANDY_MACHINE_ID_HERE with your candy machine id

LinkError: WebAssembly.instantiate(): Import #1 module="go" function="runtime.resetMemoryDataView" error: function import requires a callable

As I'm building my Web assembly application I have bumped into issue with a cryptic error:
LinkError: WebAssembly.instantiate(): Import #1 module="go" function="runtime.resetMemoryDataView" error: function import requires a callable
It is compiled with this command:
GOOS=js GOARCH=wasm go build -o main.wasm main.go server.go
This is the body of index.html, there is nothing in
<body class="is-preload">
<script src="wasm_exec.js"></script>
<script>
wasm_filename = "main.wasm";
function message(s){
document.getElementById("message").textContent = s;
}
function load_wasm(){
if (!WebAssembly.instantiateStreaming) { // polyfill
WebAssembly.instantiateStreaming = async (resp, importObject) => {
const source = await (await resp).arrayBuffer();
return await WebAssembly.instantiate(source, importObject);
};
}
const go = new Go();
WebAssembly.instantiateStreaming(fetch(wasm_filename), go.importObject)
.then(results => { go.run(results.instance); })
.catch((err) => {
message("Error Loading WebAssembly - " + err);
console.error(err);
// location.reload(true);
});
}
load_wasm()
</script>
This is main.go:
import (
"fmt"
"strconv"
"syscall/js"
)
func key(this js.Value, arg []js.Value) interface{} {
arg[0].Call("stopPropagation")
arg[0].Call("preventDefault")
return nil
}
func sum(this js.Value, args []js.Value) interface{} {
var rv interface{}
value1 := js.Global().Get("document").Call("getElementById", args[0].String()).Get("value").String()
value2 := js.Global().Get("document").Call("getElementById", args[1].String()).Get("value").String()
int1, _ := strconv.Atoi(value1)
int2, _ := strconv.Atoi(value2)
js.Global().Get("document").Call("getElementById", "result").Set("value", int1+int2)
return rv
}
func register_callbacks() {
js.Global().Set("key", js.FuncOf(key))
js.Global().Set("sum", js.FuncOf(sum))
}
func init() {
register_callbacks()
fmt.Printf("WebAssembly program started\n")
select {}
}
Then we have the server:
package main
import (
"flag"
"fmt"
"net/http"
)
var listen = flag.String("listen", ":8081", "listen address")
var dir = flag.String("dir", ".", "directory to serve")
func main() {
flag.Parse()
fs := http.FileServer(http.Dir("./assets/"))
http.Handle("/", fs)
fmt.Printf("Web server running. Listening on %q", *listen)
err := http.ListenAndServe(*listen, http.FileServer(http.Dir(*dir)))
fmt.Printf("%v\n", err)
}
This is wasm_exec.js:
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.
(() => {
if (typeof global !== "undefined") {
// global already exists
} else if (typeof window !== "undefined") {
window.global = window;
} else if (typeof self !== "undefined") {
self.global = self;
} else {
throw new Error("cannot export Go (neither global, window nor self is defined)");
}
// Map web browser API and Node.js API to a single common API (preferring web standards over Node.js API).
const isNodeJS = global.process && global.process.title === "node";
if (isNodeJS) {
global.require = require;
global.fs = require("fs");
const nodeCrypto = require("crypto");
global.crypto = {
getRandomValues(b) {
nodeCrypto.randomFillSync(b);
},
};
global.performance = {
now() {
const [sec, nsec] = process.hrtime();
return sec * 1000 + nsec / 1000000;
},
};
const util = require("util");
global.TextEncoder = util.TextEncoder;
global.TextDecoder = util.TextDecoder;
} else {
let outputBuf = "";
global.fs = {
constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1 }, // unused
writeSync(fd, buf) {
outputBuf += decoder.decode(buf);
const nl = outputBuf.lastIndexOf("\n");
if (nl != -1) {
console.log(outputBuf.substr(0, nl));
outputBuf = outputBuf.substr(nl + 1);
}
return buf.length;
},
write(fd, buf, offset, length, position, callback) {
if (offset !== 0 || length !== buf.length || position !== null) {
throw new Error("not implemented");
}
const n = this.writeSync(fd, buf);
callback(null, n);
},
open(path, flags, mode, callback) {
const err = new Error("not implemented");
err.code = "ENOSYS";
callback(err);
},
read(fd, buffer, offset, length, position, callback) {
const err = new Error("not implemented");
err.code = "ENOSYS";
callback(err);
},
fsync(fd, callback) {
callback(null);
},
};
}
const encoder = new TextEncoder("utf-8");
const decoder = new TextDecoder("utf-8");
global.Go = class {
constructor() {
this.argv = ["js"];
this.env = {};
this.exit = (code) => {
if (code !== 0) {
console.warn("exit code:", code);
}
};
this._exitPromise = new Promise((resolve) => {
this._resolveExitPromise = resolve;
});
this._pendingEvent = null;
this._scheduledTimeouts = new Map();
this._nextCallbackTimeoutID = 1;
const mem = () => {
// The buffer may change when requesting more memory.
return new DataView(this._inst.exports.mem.buffer);
}
const setInt64 = (addr, v) => {
mem().setUint32(addr + 0, v, true);
mem().setUint32(addr + 4, Math.floor(v / 4294967296), true);
}
const getInt64 = (addr) => {
const low = mem().getUint32(addr + 0, true);
const high = mem().getInt32(addr + 4, true);
return low + high * 4294967296;
}
const loadValue = (addr) => {
const f = mem().getFloat64(addr, true);
if (f === 0) {
return undefined;
}
if (!isNaN(f)) {
return f;
}
const id = mem().getUint32(addr, true);
return this._values[id];
}
const storeValue = (addr, v) => {
const nanHead = 0x7FF80000;
if (typeof v === "number") {
if (isNaN(v)) {
mem().setUint32(addr + 4, nanHead, true);
mem().setUint32(addr, 0, true);
return;
}
if (v === 0) {
mem().setUint32(addr + 4, nanHead, true);
mem().setUint32(addr, 1, true);
return;
}
mem().setFloat64(addr, v, true);
return;
}
switch (v) {
case undefined:
mem().setFloat64(addr, 0, true);
return;
case null:
mem().setUint32(addr + 4, nanHead, true);
mem().setUint32(addr, 2, true);
return;
case true:
mem().setUint32(addr + 4, nanHead, true);
mem().setUint32(addr, 3, true);
return;
case false:
mem().setUint32(addr + 4, nanHead, true);
mem().setUint32(addr, 4, true);
return;
}
let ref = this._refs.get(v);
if (ref === undefined) {
ref = this._values.length;
this._values.push(v);
this._refs.set(v, ref);
}
let typeFlag = 0;
switch (typeof v) {
case "string":
typeFlag = 1;
break;
case "symbol":
typeFlag = 2;
break;
case "function":
typeFlag = 3;
break;
}
mem().setUint32(addr + 4, nanHead | typeFlag, true);
mem().setUint32(addr, ref, true);
}
const loadSlice = (addr) => {
const array = getInt64(addr + 0);
const len = getInt64(addr + 8);
return new Uint8Array(this._inst.exports.mem.buffer, array, len);
}
const loadSliceOfValues = (addr) => {
const array = getInt64(addr + 0);
const len = getInt64(addr + 8);
const a = new Array(len);
for (let i = 0; i < len; i++) {
a[i] = loadValue(array + i * 8);
}
return a;
}
const loadString = (addr) => {
const saddr = getInt64(addr + 0);
const len = getInt64(addr + 8);
return decoder.decode(new DataView(this._inst.exports.mem.buffer, saddr, len));
}
const timeOrigin = Date.now() - performance.now();
this.importObject = {
go: {
// Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters)
// may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported
// function. A goroutine can switch to a new stack if the current stack is too small (see morestack function).
// This changes the SP, thus we have to update the SP used by the imported function.
// func wasmExit(code int32)
"runtime.wasmExit": (sp) => {
const code = mem().getInt32(sp + 8, true);
this.exited = true;
delete this._inst;
delete this._values;
delete this._refs;
this.exit(code);
},
// func wasmWrite(fd uintptr, p unsafe.Pointer, n int32)
"runtime.wasmWrite": (sp) => {
const fd = getInt64(sp + 8);
const p = getInt64(sp + 16);
const n = mem().getInt32(sp + 24, true);
fs.writeSync(fd, new Uint8Array(this._inst.exports.mem.buffer, p, n));
},
// func nanotime() int64
"runtime.nanotime": (sp) => {
setInt64(sp + 8, (timeOrigin + performance.now()) * 1000000);
},
// func walltime() (sec int64, nsec int32)
"runtime.walltime": (sp) => {
const msec = (new Date).getTime();
setInt64(sp + 8, msec / 1000);
mem().setInt32(sp + 16, (msec % 1000) * 1000000, true);
},
// func scheduleTimeoutEvent(delay int64) int32
"runtime.scheduleTimeoutEvent": (sp) => {
const id = this._nextCallbackTimeoutID;
this._nextCallbackTimeoutID++;
this._scheduledTimeouts.set(id, setTimeout(
() => { this._resume(); },
getInt64(sp + 8) + 1, // setTimeout has been seen to fire up to 1 millisecond early
));
mem().setInt32(sp + 16, id, true);
},
// func clearTimeoutEvent(id int32)
"runtime.clearTimeoutEvent": (sp) => {
const id = mem().getInt32(sp + 8, true);
clearTimeout(this._scheduledTimeouts.get(id));
this._scheduledTimeouts.delete(id);
},
// func getRandomData(r []byte)
"runtime.getRandomData": (sp) => {
crypto.getRandomValues(loadSlice(sp + 8));
},
// func stringVal(value string) ref
"syscall/js.stringVal": (sp) => {
storeValue(sp + 24, loadString(sp + 8));
},
// func valueGet(v ref, p string) ref
"syscall/js.valueGet": (sp) => {
const result = Reflect.get(loadValue(sp + 8), loadString(sp + 16));
sp = this._inst.exports.getsp(); // see comment above
storeValue(sp + 32, result);
},
// func valueSet(v ref, p string, x ref)
"syscall/js.valueSet": (sp) => {
Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32));
},
// func valueIndex(v ref, i int) ref
"syscall/js.valueIndex": (sp) => {
storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16)));
},
// valueSetIndex(v ref, i int, x ref)
"syscall/js.valueSetIndex": (sp) => {
Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24));
},
// func valueCall(v ref, m string, args []ref) (ref, bool)
"syscall/js.valueCall": (sp) => {
try {
const v = loadValue(sp + 8);
const m = Reflect.get(v, loadString(sp + 16));
const args = loadSliceOfValues(sp + 32);
const result = Reflect.apply(m, v, args);
sp = this._inst.exports.getsp(); // see comment above
storeValue(sp + 56, result);
mem().setUint8(sp + 64, 1);
} catch (err) {
storeValue(sp + 56, err);
mem().setUint8(sp + 64, 0);
}
},
// func valueInvoke(v ref, args []ref) (ref, bool)
"syscall/js.valueInvoke": (sp) => {
try {
const v = loadValue(sp + 8);
const args = loadSliceOfValues(sp + 16);
const result = Reflect.apply(v, undefined, args);
sp = this._inst.exports.getsp(); // see comment above
storeValue(sp + 40, result);
mem().setUint8(sp + 48, 1);
} catch (err) {
storeValue(sp + 40, err);
mem().setUint8(sp + 48, 0);
}
},
// func valueNew(v ref, args []ref) (ref, bool)
"syscall/js.valueNew": (sp) => {
try {
const v = loadValue(sp + 8);
const args = loadSliceOfValues(sp + 16);
const result = Reflect.construct(v, args);
sp = this._inst.exports.getsp(); // see comment above
storeValue(sp + 40, result);
mem().setUint8(sp + 48, 1);
} catch (err) {
storeValue(sp + 40, err);
mem().setUint8(sp + 48, 0);
}
},
// func valueLength(v ref) int
"syscall/js.valueLength": (sp) => {
setInt64(sp + 16, parseInt(loadValue(sp + 8).length));
},
// valuePrepareString(v ref) (ref, int)
"syscall/js.valuePrepareString": (sp) => {
const str = encoder.encode(String(loadValue(sp + 8)));
storeValue(sp + 16, str);
setInt64(sp + 24, str.length);
},
// valueLoadString(v ref, b []byte)
"syscall/js.valueLoadString": (sp) => {
const str = loadValue(sp + 8);
loadSlice(sp + 16).set(str);
},
// func valueInstanceOf(v ref, t ref) bool
"syscall/js.valueInstanceOf": (sp) => {
mem().setUint8(sp + 24, loadValue(sp + 8) instanceof loadValue(sp + 16));
},
"debug": (value) => {
console.log(value);
},
}
};
}
async run(instance) {
this._inst = instance;
this._values = [ // TODO: garbage collection
NaN,
0,
null,
true,
false,
global,
this._inst.exports.mem,
this,
];
this._refs = new Map();
this.exited = false;
const mem = new DataView(this._inst.exports.mem.buffer)
// Pass command line arguments and environment variables to WebAssembly by writing them to the linear memory.
let offset = 4096;
const strPtr = (str) => {
let ptr = offset;
new Uint8Array(mem.buffer, offset, str.length + 1).set(encoder.encode(str + "\0"));
offset += str.length + (8 - (str.length % 8));
return ptr;
};
const argc = this.argv.length;
const argvPtrs = [];
this.argv.forEach((arg) => {
argvPtrs.push(strPtr(arg));
});
const keys = Object.keys(this.env).sort();
argvPtrs.push(keys.length);
keys.forEach((key) => {
argvPtrs.push(strPtr(`${key}=${this.env[key]}`));
});
const argv = offset;
argvPtrs.forEach((ptr) => {
mem.setUint32(offset, ptr, true);
mem.setUint32(offset + 4, 0, true);
offset += 8;
});
this._inst.exports.run(argc, argv);
if (this.exited) {
this._resolveExitPromise();
}
await this._exitPromise;
}
_resume() {
if (this.exited) {
throw new Error("Go program has already exited");
}
this._inst.exports.resume();
if (this.exited) {
this._resolveExitPromise();
}
}
_makeFuncWrapper(id) {
const go = this;
return function () {
const event = { id: id, this: this, args: arguments };
go._pendingEvent = event;
go._resume();
return event.result;
};
}
}
if (isNodeJS) {
if (process.argv.length < 3) {
process.stderr.write("usage: go_js_wasm_exec [wasm binary] [arguments]\n");
process.exit(1);
}
const go = new Go();
go.argv = process.argv.slice(2);
go.env = Object.assign({ TMPDIR: require("os").tmpdir() }, process.env);
go.exit = process.exit;
WebAssembly.instantiate(fs.readFileSync(process.argv[2]), go.importObject).then((result) => {
process.on("exit", (code) => { // Node.js exits if no event handler is pending
if (code === 0 && !go.exited) {
// deadlock, make Go print error and stack traces
go._pendingEvent = { id: 0 };
go._resume();
}
});
return go.run(result.instance);
}).catch((err) => {
throw err;
});
}
})();
runtime.resetMemoryDataView() function is part of wasm_exec.js support script that bridges WebAssembly binary with JavaScript environment. This and similar errors often mean that wasm_exec.js isn't compatible with WebAssembly binary because version of Golang used to compile binary is different (usually newer) than one wasm_exec.js was taken from.
When running or shipping Golang WebAssembly binary always make sure that you are using wasm_exec.js support script from the same version of Golang as was used to compile binary. You can copy it from $(go env GOROOT)/misc/wasm/wasm_exec.js to be sure.
See official Golang WebAssembly wiki for further details.
As blami suggested a simple:
cp $(go env GOROOT)/misc/wasm/wasm_exec.js ./path/to/old/wasm_exec.js
Worked for me.

Resources