How to call from webassembly websocket API?

问题:

It's easy. Please see code in response.

回答1:

The example code connect to public echo web socket server, send message, receive response, and disconnect.

JavaScript code provide functions for web socket and logging to webassembly code.

Main program logic wrote in C, that then compile to wasm file.

Results can be seen in js console.

Compilation:

emcc ws_test.c -o ws_test.html -O1 -s WASM=1 -s ONLY_MY_CODE=1 -s EXPORTED_FUNCTIONS="['_getBuffer','_wsOnMessage', '_wsOnOpen', '_test']"

Result file ws_test.wasm is tiny. (431 bytes)

To check the wasm can be decompiled to readably s-expressions by:
wasm2wast ws_test.wasm -o ws_test.wast

ws_test.c

    extern void wsConnect(char *address);     extern void wsSend(char *message);     extern void wsClose();     extern void print(char *message);      char buffer[100];     char *getBuffer(){ return buffer; }      void wsOnMessage(){       print("received message");       print(buffer);       wsClose();       print("connection closed");     }      void wsOnOpen(){       print("connected");       wsSend("Hello WebAssembly !");     }       void test(){       wsConnect("ws://echo.websocket.org");       print("connecting...");     } 

ws_test.html

      <script>        var webSocket;       const memory = new WebAssembly.Memory({ initial: 256, maximum: 256 });       const buffer = new Uint8Array(memory.buffer);       var exports;        function toJsStr(offset){           var s="";           for(;;){               var b = buffer[offset++];               if( b == 0 )                   return s;           s += String.fromCharCode(b);           }       }        function toCStr(str){         var offset = exports._getBuffer();         for (var i = 0; i < str.length; ++i) {           buffer[offset++] = str.charCodeAt(i);         }         buffer[offset] = 0;       }        function print(offset){         console.log(toJsStr(offset));       }        function wsConnect(offset){         webSocket = new WebSocket(toJsStr(offset));         webSocket.onopen = function(){           console.log("Socket is open");           exports._wsOnOpen();         };          webSocket.onmessage = function (evt){            var msg = evt.data;           console.log("Message is received...");           toCStr(msg);           exports._wsOnMessage();         };       }        function wsClose(){         webSocket.close();       }        function wsSend(offset){         webSocket.send(toJsStr(offset));       }        fetch('ws_test.wasm').then(response =>          response.arrayBuffer()       ).then(bytes => {           var imports = {};           imports.env = {};           imports.env.memory = memory;           imports.env.memoryBase = 0;           imports.env.table = new WebAssembly.Table({ initial: 0, maximum: 0, element: 'anyfunc' });           imports.env.tableBase = 0;           imports.env._print = print;           imports.env._wsConnect = wsConnect;           imports.env._wsSend = wsSend;           imports.env._wsClose = wsClose;             return WebAssembly.instantiate(bytes, imports);         }       ).then(module => {             exports = module.instance.exports;               exports._test();           }       );       </script> 

Here used compiler flag 'ONLY_MY_CODE=1', so the result wasm will be very small, and not be linked to any standard libraries

This mode is convenient if the module is used for arithmetic calculations.

So you cannot use in the mode: printf, malloc/free, strcpy !

If you missed string functions: strcpy, strcat, strlen ... - you can add the functions sources to code.

But if you need for example malloc/free better link standard C libraries.

回答2:

It's only demo, not a production.

• toJsStr(offset) and toCStr(str) could support UTF-8 (currently only ASCII)

• toCStr should use not only buffer offset, but also buffer size to prevent buffer overflow.

• Missed communication error handling: should be used web socket callbacks: onerror(), onclose()

文章来源: How to call from webassembly websocket API?