How to use in NativeScript + angular 2

[mubbashar]

Is there any tutorial for integration in NativeScript + angular 2 . I am not able to make it work Please guide to some tutorial

thanks!

[mubbashar]

when i install this plugin and run the nativescript then i get this error.

=== BUILD TARGET Socket.IO-Client-Swift OF PROJECT Pods WITH CONFIGURATION Debug ===

Check dependencies
Socket.IO-Client-Swift will not be code signed because its settings don't specify a development team.
“Use Legacy Swift Language Version” (SWIFT_VERSION) is required to be configured correctly for targets which use Swift. Use the [Edit > Convert > To Current Swift Syntax…] menu to choose a Swift version or use the Build Settings editor to configure the build setting directly.

** BUILD FAILED **

I open the xcode project and convert swift to version 3 as suggested by xcode. And built the project and it got succeed.

***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x10066a41c NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
2   0x100b478e4 ffi_closure_SYSV_inner
3   0x100b481b4 .Ldo_closure
4   0x19a1027b0 <redacted>
5   0x19a102730 <redacted>
6   0x19a0ecbe4 <redacted>
7   0x19a10201c <redacted>
8   0x19a101b44 <redacted>
9   0x19a0fcd8c <redacted>
10  0x19a0cd858 <redacted>
11  0x19a8bacb8 <redacted>
12  0x19a8b4720 <redacted>
13  0x194232278 <redacted>
14  0x194231bc0 <redacted>
15  0x19422f7c0 <redacted>
16  0x19415e048 CFRunLoopRunSpecific
17  0x195be1198 GSEventRunModal
18  0x19a138628 <redacted>
19  0x19a133360 UIApplicationMain
20  0x100b48044 ffi_call_SYSV
21  0x100b47424 ffi_call_int
22  0x100b46f3c ffi_call
23  0x10063067c NativeScript::FFICall::call(JSC::ExecState*)
Mubbashars-MBP:demo Mubi$ 

then go this when i click join button in the app first screen

any help will be appreciated

[triniwiz]

https://github.com/triniwiz/nativescript-ng2-socketio-demo its a bit old though and @roblav96

[mubbashar]

***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x10067a41c NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
2   0x100b578e4 ffi_closure_SYSV_inner
3   0x100b581b4 .Ldo_closure
4   0x19a1027b0 <redacted>
5   0x19a102730 <redacted>
6   0x19a0ecbe4 <redacted>
7   0x19a10201c <redacted>
8   0x19a101b44 <redacted>
9   0x19a0fcd8c <redacted>
10  0x19a0cd858 <redacted>
11  0x19a8bacb8 <redacted>
12  0x19a8b4720 <redacted>
13  0x194232278 <redacted>
14  0x194231bc0 <redacted>
15  0x19422f7c0 <redacted>
16  0x19415e048 CFRunLoopRunSpecific
17  0x195be1198 GSEventRunModal
18  0x19a138628 <redacted>
19  0x19a133360 UIApplicationMain
20  0x100b58044 ffi_call_SYSV
21  0x100b57424 ffi_call_int
22  0x100b56f3c ffi_call
23  0x10064067c NativeScript::FFICall::call(JSC::ExecState*)
24  0x1009351e0 JSC::LLInt::setUpCall(JSC::ExecState*, JSC::Instruction*, JSC::CodeSpecializationKind, JSC::JSValue, JSC::LLIntCallLinkInfo*)
25  0x10093b758 llint_entry
26  0x10093b768 llint_entry
27  0x100935ab8 vmEntryToJavaScript
28  0x1008e22a8 JSC::JITCode::execute(JSC::VM*, JSC::ProtoCallFrame*)
29  0x1008c81b0 JSC::Interpreter::executeCall(JSC::ExecState*, JSC::JSObject*, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
30  0x1009f2eac JSC::call(JSC::ExecState*, JSC::JSValue, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&, WTF::NakedPtr<JSC::Exception>&)
31  0x100651738 NativeScript::GlobalObject::moduleLoaderEvaluate(JSC::JSGlobalObject*, JSC::ExecState*, JSC::JSValue, JSC::JSValue)
JavaScript stack trace:
1   emit@file:///app/tns_modules/nativescript-socketio/socketio.js:81:38
2   join@file:///app/login.js:26:18
3   notify@file:///app/tns_modules/data/observable/observable.js:149:31
4   _emit@file:///app/tns_modules/data/observable/observable.js:168:24
5   tap@file:///app/tns_modules/ui/button/button.js:21:24
6   UIApplicationMain@[native code]
7   start@file:///app/tns_modules/application/application.js:234:26
8   anonymous@file:///app/app.js:4:18
9   evaluate@[native code]
10  moduleEvaluation@[native code]
11  @[native code]
12  promiseReactionJob@[native code]
JavaScript error:
file:///app/tns_modules/nativescript-socketio/socketio.js:81:38: JS ERROR TypeError: this.socket.emitWithItems is not a function. (In 'this.socket.emitWithItems(event, payload)', 'this.socket.emitWithItems' is undefined)

got this error on running

[roblav96]

@triniwiz @mubbashar I've been having 0 issues with the latest build on ios10 and xcode8

[mubbashar]

can you please send me steps you follow. that will be really helpful. I really need it work

[roblav96]

export class SocketClass {

    private static _socket: SocketIO = null

    constructor(
        private _scope: ScopeClass
    ) {
        global.tnsconsole.log('SocketClass > constructor')
    }

    getSocket(): SocketIO {
        return SocketClass._socket
    }

    connect() {
        if (SocketClass._socket) {
            SocketClass._socket.connect()
        }
    }

    disconnect() {
        if (SocketClass._socket) {
            SocketClass._socket.disconnect()
        }
    }

    start() {
        global.tnsconsole.info('Socket > start')

        if (SocketClass._socket) {
            global.tnsconsole.error('SocketClass._socket > EXISTS')
            SocketClass._socket.connect()
            return
        }

        let uuid: string = this._scope.uuid
        let xid: string = this._scope.xid
        let bytes: string = this._scope.bytes
        let token: string = this._scope.token

        if (!xid || !bytes || !token) {
            global.tnsconsole.error('!xid || !bytes || !token')
            return
        }
        let creds: string = JSON.stringify({ uuid, xid, bytes, token, version: VERSION })
        let opts: any = {
            path: '/socket',
            forcePolling: true,
        }
        if (application.ios) {
            opts.connectParams = ['creds', creds]
        } else if (application.android) {
            opts.query = 'creds=' + creds
        }

        SocketClass._socket = new SocketIO(IP, opts)

        SocketClass._socket.on('connect', function(response) {
            global.tnsconsole.log('socket > connect')
        })

        SocketClass._socket.on('data', function(response) {
            if (application.ios) {
                global.tnsconsole.log('socket > data', response.description)
            } else if (application.android) {
                global.tnsconsole.log('socket > data', response)
            }
        })

        SocketClass._socket.on('disconnect', function(response) {
            if (application.ios) {
                global.tnsconsole.log('socket > disconnect', response.description)
            } else if (application.android) {
                global.tnsconsole.log('socket > disconnect', response)
            }
        })

        SocketClass._socket.on('reconnect_attempt', function(response) {
            if (application.ios) {
                global.tnsconsole.log('socket > reconnect_attempt', response.description)
            } else if (application.android) {
                global.tnsconsole.log('socket > reconnect_attempt', response)
            }
        })

        SocketClass._socket.on('error', function(error) {
            if (application.ios) {
                global.tnsconsole.error('socket > error', error.description)
            } else if (application.android) {
                global.tnsconsole.error('socket > error', error)
            }
        })

        SocketClass._socket.connect()
    }

    destroy() {
        if (SocketClass._socket) {
            SocketClass._socket.disconnect()
            if (application.ios) {
                SocketClass._socket.instance.removeAllHandlers()
            } else if (application.android) {
                SocketClass._socket.instance.close()
            }
            SocketClass._socket = null
            global.tnsconsole.warn('SocketClass._socket > DESTROYED')
        }
    }

}

export const SocketService: SocketClass = new SocketClass(ScopeService)

[mubbashar]

did you install the plugin using

npm install nativescript-socketio

[mubbashar]

I modify the code.

import * as application from "application";
import {Injectable} from '@angular/core';
import {SocketIO} from 'nativescript-socketio';
import {Config} from "../config";

@Injectable()
export class SocketClass {

    private static _socket:SocketIO = null

    constructor(private _scope:ScopeClass) {
        global.tnsconsole.log('SocketClass > constructor')
    }

    getSocket():SocketIO {
        return SocketClass._socket
    }

    connect() {
        if (SocketClass._socket) {
            SocketClass._socket.connect()
        }
    }

    disconnect() {
        if (SocketClass._socket) {
            SocketClass._socket.disconnect()
        }
    }

    start() {
        global.tnsconsole.info('Socket > start')

        if (SocketClass._socket) {
            global.tnsconsole.error('SocketClass._socket > EXISTS')
            SocketClass._socket.connect()
            return
        }

        let uuid:string = this._scope.uuid
        let xid:string = this._scope.xid
        let bytes:string = this._scope.bytes
        let token:string = this._scope.token

        if (!xid || !bytes || !token) {
            global.tnsconsole.error('!xid || !bytes || !token')
            return
        }
        let creds:string = JSON.stringify({uuid, xid, bytes, token, version: Config.socketVERSION})
        let opts:any = {
            path: '/socket',
            forcePolling: true,
        }
        if (application.ios) {
            opts.connectParams = ['creds', creds]
        } else if (application.android) {
            opts.query = 'creds=' + creds
        }

        SocketClass._socket = new SocketIO(Config.socketUrl, opts)

        SocketClass._socket.on('connect', function (response) {
            global.tnsconsole.log('socket > connect')
        })

        SocketClass._socket.on('data', function (response) {
            if (application.ios) {
                global.tnsconsole.log('socket > data', response.description)
            } else if (application.android) {
                global.tnsconsole.log('socket > data', response)
            }
        })

        SocketClass._socket.on('disconnect', function (response) {
            if (application.ios) {
                global.tnsconsole.log('socket > disconnect', response.description)
            } else if (application.android) {
                global.tnsconsole.log('socket > disconnect', response)
            }
        })

        SocketClass._socket.on('reconnect_attempt', function (response) {
            if (application.ios) {
                global.tnsconsole.log('socket > reconnect_attempt', response.description)
            } else if (application.android) {
                global.tnsconsole.log('socket > reconnect_attempt', response)
            }
        })

        SocketClass._socket.on('error', function (error) {
            if (application.ios) {
                global.tnsconsole.error('socket > error', error.description)
            } else if (application.android) {
                global.tnsconsole.error('socket > error', error)
            }
        })

        SocketClass._socket.connect()
    }

    destroy() {
        if (SocketClass._socket) {
            SocketClass._socket.disconnect()
            if (application.ios) {
                SocketClass._socket.instance.removeAllHandlers()
            } else if (application.android) {
                SocketClass._socket.instance.close()
            }
            SocketClass._socket = null
            global.tnsconsole.warn('SocketClass._socket > DESTROYED')
        }
    }

}

export const SocketService:SocketClass = new SocketClass(ScopeService)

but now getting ScopeClass error.

app/shared/socket/SocketClass.ts(11,32): error TS2304: Cannot find name 'ScopeClass'.

app/shared/socket/SocketClass.ts(116,58): error TS2304: Cannot find name 'ScopeService'.

Can you tell how to reference this ScopeClass

thanks

[roblav96]

@mubbashar Scope stuff is my own stuff. You can leave it out like so:

export class SocketClass {

    private static _socket: SocketIO = null

    constructor(

    ) {
        console.log('SocketClass > constructor')
    }

    getSocket(): SocketIO {
        return SocketClass._socket
    }

    connect() {
        if (SocketClass._socket) {
            SocketClass._socket.connect()
        }
    }

    disconnect() {
        if (SocketClass._socket) {
            SocketClass._socket.disconnect()
        }
    }

    start() {
        console.info('Socket > start')

        if (SocketClass._socket) {
            console.error('SocketClass._socket > EXISTS')
            SocketClass._socket.connect()
            return
        }

        let opts: any = {
            path: '/socket',
        }
        SocketClass._socket = new SocketIO(IP, opts)

        SocketClass._socket.on('connect', function(response) {
            console.log('socket > connect')
        })

        SocketClass._socket.on('data', function(response) {
            if (application.ios) {
                console.log('socket > data', response.description)
            } else if (application.android) {
                console.log('socket > data', response)
            }
        })

        SocketClass._socket.on('disconnect', function(response) {
            if (application.ios) {
                console.log('socket > disconnect', response.description)
            } else if (application.android) {
                console.log('socket > disconnect', response)
            }
        })

        SocketClass._socket.on('reconnect_attempt', function(response) {
            if (application.ios) {
                console.log('socket > reconnect_attempt', response.description)
            } else if (application.android) {
                console.log('socket > reconnect_attempt', response)
            }
        })

        SocketClass._socket.on('error', function(error) {
            if (application.ios) {
                console.error('socket > error', error.description)
            } else if (application.android) {
                console.error('socket > error', error)
            }
        })

        SocketClass._socket.connect()
    }

    destroy() {
        if (SocketClass._socket) {
            SocketClass._socket.disconnect()
            if (application.ios) {
                SocketClass._socket.instance.removeAllHandlers()
            } else if (application.android) {
                SocketClass._socket.instance.close()
            }
            SocketClass._socket = null
            console.warn('SocketClass._socket > DESTROYED')
        }
    }

}

export const SocketService: SocketClass = new SocketClass()

[mubbashar]

I created a git repository. Can you please have a look at it https://github.com/mubbashar/nativescript-socket-test branch angular-start Steps i follow to configure nativescript-socketio

1) npm install nativescript-socketio

2) tns run ios --device 6a25b84ceb6e1feafedcbab2a73480ef96abb54e

=== BUILD TARGET Socket.IO-Client-Swift OF PROJECT Pods WITH CONFIGURATION Debug ===

Check dependencies
Socket.IO-Client-Swift will not be code signed because its settings don't specify a development team.
“Use Legacy Swift Language Version” (SWIFT_VERSION) is required to be configured correctly for targets which use Swift. Use the [Edit > Convert > To Current Swift Syntax…] menu to choose a Swift version or use the Build Settings editor to configure the build setting directly.

** BUILD FAILED **

Then i open the xcode project and select the team for Pod Project.

3) added this code at the end of pod file for SWIFT_VERSION issue

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '3.0'
    end
  end 
end

4) First i use your class and i got some error of ScopeClass. i remove those error by remvong ScopeClass from SocketService and still was not working

5) In login.component.ts i write this code to connect to socket server.

connectSocket(){
        const opts = {};
        console.log( Config.socketUrl );
        const _socket = new SocketIO(Config.socketUrl , opts )

        _socket.on('connect', function (response) {
            console.log('socket > connect')
        });
        console.log( 'here connect' );
        console.log( _socket.connect() );
        _socket.emit('init',{});
    }

CONSOLE LOG file:///app/pages/login/login.component.js:39:20: http://10.1.1.33:40001 CONSOLE LOG file:///app/pages/login/login.component.js:44:20: here connect CONSOLE LOG file:///app/pages/login/login.component.js:45:20: undefined

Getting undefined and also no connection on server. I try to connect SocetIO from web and it was successful.

_socket.emit('init',{});

CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:344:22: Error: Uncaught (in promise): Error: Error in ./LoginComponent class LoginComponent_Host - inline template:0:0 caused by: this.socket.emitWithItems is not a function. (In 'this.socket.emitWithItems(event, payload)', 'this.socket.emitWithItems' is undefined)

[roblav96]

Make sure your project builds and runs using xcode first then use the cli.

[mubbashar]

Yes it does compile and run

[mubbashar]

The output i show is after running the app successfully

[roblav96]

Idk man, I'll have to get back to you by end of week. Everything works fine no problem using that example I posted. Read the source and find out what's causing the error.

[mubbashar]

Yes please. It will be great if you update the demo app with the angular 2

[tviel]

Hi. I share the last issue 'this.socket.emitWithItems' is undefined and would be highly interested in the solution.

However, not sure, if the problem is not in the new SocketIO or connect() as the object resulting stringified is just: {"socket":{}} is that a correct instance?

Thanx

[mubbashar]

emitWithItems function is not available in SocketIO Swift 3 version.

pod 'Socket.IO-Client-Swift', :git => 'https://github.com/socketio/socket.io-client-swift.git', :branch => 'swift2.3'

I am using Socket.IO-Client-Swift 7.0.3

use 2.3 branch in your pod file until the plugin is updated to use latest version

Finally i am able to connect :)

[tviel]

Yes. In the repo of the socketio pod, the functions got renamed to emit / emitWithAck. I updated my plugins podfile to point to branch swift2.3 as you proposed. After tns platform add/remove, I can see, that older version Installing Socket.IO-Client-Swift (7.0.3) is pulled.

However, I still keep getting JS ERROR TypeError: this.socket.emitWithItems is not a function. (In 'this.socket.emitWithItems(event, payload)', 'this.socket.emitWithItems' is undefined)

Any miracle you additionally triggered to get it running?

Best Regards

[mubbashar]

After pod install i open xcode project. It ask for swift conversion and i select 2.3 version and update the xcode project. Thatstheadditional thing i think i did

[tviel]

Thanks for fast reply. However, after doing a pod install and opening xcode project, I dont get any question fro swift version nor can I find any appropriate setting in the build config (running xcode 8.0).

On the tns run, I get WARNING]: [!] CocoaPods did not set the base configuration of your project because your project already has a custom config set. In order for CocoaPods integration to work at all, please either set the base configurations of the targetapppursUetoPods/Target Support Files/Pods-apppursUe/Pods-apppursUe.release.xcconfigor include thePods/Target Support Files/Pods-apppursUe/Pods-apppursUe.release.xcconfigin your build configuration (apppursUe/build-release.xcconfig).

but this is from very beginning as far as I remember, not sure if that is related to the issue.

In addition, building in xcode also fails, as

ld: warning: directory not found for option '-F/Users/tviel/Library/Developer/Xcode/DerivedData/apppursUe-gnmndpvlsandgabknepyoowjttxo/Build/Products/Debug-iphonesimulator/Socket.IO-Client-Swift'
ld: framework not found SocketIO
clang: error: linker command failed with exit code 1 (use -v to see invocation)

while tns run ios works.

[mubbashar]

I am using xcode 8

[mubbashar]

I think better to delete platform folder and build again as i did

[tviel]

Thank you for your support. I did the steps you mentioned, sadly without success. The error keeps flashing. Guess I have to dig more into the nativescript moduling stuff, if I'm not missing something basic for updating platform sources, as no change from node_modules folder seems to pass through to platform specific part.

[mubbashar]

Let me know if i can help you in any way. I know how this feel

[tviel]

I checked 2.3 swift version of the cocoapod socketioswift client. Also here, the functions are named emit and emitWithAck lacking the WithItems. It worked for you with that branch?

[roblav96]

Make sure your socketio server is configured to only polling like so:

const io: SocketIO.Server = SocketIO(ioport, {
    path: '/socket',
    transports: ['polling'],
})
io.serveClient(false)

[tviel]

Hi. I appreciate your comment and will try it out. Do you have more words, why we should switch from the default polling, websocket (which starts with polling but tries to upgrade to websocket connection if available) to only polling? Isn't that a lack of performance?

btw: It is working on android without server change.

[roblav96]

@tviel You don't have to use polling, it's just recommended in my experience.

[roblav96]

@tviel @mubbashar Also try installing platforms on the @next repo.

Make your package.json look like this:

    "nativescript": {
        "id": "com.app.is.cool",
        "tns-android": {
            "version": "next"
        },
        "tns-ios": {
            "version": "next"
        }
    },

[mubbashar]

@roblav96 whats this for ?

[tviel]

@roblav96 your proposal results in

Found peer TypeScript 2.0.3
Invalid Version: next

[roblav96]

Delete your node_modules, platforms, and libs folder then run

tns platform add ios@next
tns platform add android@next
tns install

then open xcode fix swift 3 and run stuff

[tviel]

Thank you for your proposal. I did as you told, but without success.

I tried every constellation of the main project file and Swift Convert. The Pod project file asked me to convert (why I thought this one has to be converted), however I was not able to convert, as the dialog was simply empty:

xcode will not build the project

nor will tns:

package.json shows next as

    "tns-ios": {
      "version": "2.5.0-2016-10-21-1"
    }

[roblav96]

Your xcode environment is not setup properly. Open project and do this: http://i.imgur.com/3Yadm5b.png

[tviel]

Hi. Clear, this is what I tried, but:

doing this for the main.xcodeproj has no effect at all. doing this for the Pods.xcodeproj is not possible, as this option is not available / greyed out.

while the cli message, that I have to set it up as shown above keeps coming.

I appreciate your patience. This is somehting special for the socketio plugin, every other plugin doesnt cause that issue.

[tviel]

I was able to build now, after changing the podfile in addition. However, also I use @next as you proposed, my app fails to communicate with:

CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:344:22: TypeError: this.socket.emitWithItems is not a function. (In 'this.socket.emitWithItems(event, payload)', 'this.socket.emitWithItems' is undefined)

So still the initial error at beginning of the discussion.

Just to be precise, I'm using the npm version of nativescript-socketio. Is the github version more advanced?

Thx for your support

[tviel]

A new project, simply created by tns create then tns plugin nativescript-socketio tns prepare ios

changing the podfile to include

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '3.0'
    end
  end 
end

and doing a pod install in platforms ios compiles successfull when tns run ios --emulator

after adding

var socket = new SocketIO('<your-url>',{}); socket.connect() socket.emit('info',{});

crashes with same error.

I included the sample project for convenience socket-test.zip

As said, checking the code of the used SocketIOSwiftClient (8.0.x), it tells to

import SocketIO
let socket = SocketIOClient(socketURL: URL(string: "http://localhost:8080")!, config: [.log(true), .forcePolling(true)])

socket.on("connect") {data, ack in
    print("socket connected")
}

socket.on("currentAmount") {data, ack in
    if let cur = data[0] as? Double {
        socket.emitWithAck("canUpdate", cur)(0) {data in
            socket.emit("update", ["amount": cur + 2.50])
        }

        ack.with("Got your currentAmount", "dude")
    }
}

socket.connect()

which is emit and emitWithAck, not emitWithItems nor emitWithAckWithItems

What else can I do to support?

[tviel]

Eventually, I got it working. I'm using following PodFile

use_frameworks!

target "app" do
# Begin Podfile - /Users/tviel/Projects/pursUe/app/node_modules/nativescript-google-maps-sdk/platforms/ios/Podfile 
 pod 'GoogleMaps' 
 # End Podfile 
# Begin Podfile - /Users/tviel/Projects/pursUe/app/node_modules/nativescript-socketio/platforms/ios/Podfile 
 #pod 'Socket.IO-Client-Swift', :git => 'https://github.com/socketio/socket.io-client-swift.git'
 pod 'Socket.IO-Client-Swift', :git => 'https://github.com/socketio/socket.io-client-swift.git', :branch => 'swift2.3'

 # End Podfile 

end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '2.3'
    end
  end
end

and xcode project conversion to 2.3

Sry for inconvenience I caused.

[odubuc]

I'm having the same issue so I figured I'd post it in here instead of creating a new thread:

I'm using Xcode 8.2.1 and Switf 3.0.2 in my package I've set tns-ios@next which is 3.0.0-2017-3-14-1

@tviel I did not understand how you resolved the issue, would it be possible to explain a bit more how you did it? (I built my app on windows and bought a Mac to compile it to IOS so I'm not familiar with anything related to Xcode/PodFile.)

[triniwiz]

Fixed in the new release but requires Xcode 8+