I need an example to connect to socket from froentend

[satyamurthy515]

💬 Questions and Help

Hi,

I tried below code to run socket.

const fastify = require('fastify')()

function handle (conn) {
  conn.pipe(conn) // creates an echo server
}

fastify.register(require('fastify-websocket'), {
  handle,
  options: { maxPayload: 1048576 }
})

fastify.get('/', { websocket: true }, (connection, req) => {
  connection.socket.on('message', message => {
    // message === 'hi from client'
    connection.socket.send('hi from server')
  })
})

fastify.listen(3000, err => {
  if (err) {
    fastify.log.error(err)
    process.exit(1)
  }
})

And from my, I connected to my socket by using var test = new WebSocket('ws://localhost:3000') . How I can trigger / API with my socket connection. Please help me with some examples.

[mcollina]

Does this not work? https://github.com/fastify/fastify-websocket/blob/master/test/router.js#L10-L46.

[eliecer2000]

What library or framework do you use in the frontend?

I can give you the example of vue-native-socket

import VueNativeSock from 'vue-native-websocket';

      Vue.use(VueNativeSock, 'ws://localhost:9000/', {
        protocol: tokenData, // optional
        reconnection: true, // (Boolean) whether to reconnect automatically (false)
        reconnectionAttempts: 10, // (Number) number of reconnection attempts before giving up (Infinity),
        reconnectionDelay: 6000 // (Number) how long to initially wait before attempting a new (1000)
      })

and server

fastify.register(require('fastify-websocket'), {
  handle(conn) {
    conn.pipe(conn) // creates an echo server
  },
  options: {
    maxPayload: 1048576,
    verifyClient(info, next) {
      try {
        const token = info.req.headers['sec-websocket-protocol']
        return next(true)
      } catch (err) {
        return next(false)
      }
    }
  }
})


  fastify.route({
    method: 'GET',
    url: '/',
    handler: (req, reply) => {
      reply.send({ route: 'OK' })
    },
    wsHandler: (conn, req, params) => {
      conn.setEncoding('utf8')
      conn.on('data', chunk => {
        console.log(chunk)
        conn.socket.send("Message OK")
      })
    }
  })

I hope it helps you.

[satyamurthy515]

Hi, Thanks for the response. I'm react and plain js. I have 2 projects. One was written in normal js and another in react. I need a common backed websocket which respond to a client with socket id. Regards, Satya

…

On Sat, Dec 14, 2019, 8:13 PM Eliecer Rangel ***@***.***> wrote: What library or framework do you use in the frontend? I can give you the example of vue-native-socket import VueNativeSock from 'vue-native-websocket'; Vue.use(VueNativeSock, 'ws://localhost:9000/', { protocol: tokenData, // optional reconnection: true, // (Boolean) whether to reconnect automatically (false) reconnectionAttempts: 10, // (Number) number of reconnection attempts before giving up (Infinity), reconnectionDelay: 6000 // (Number) how long to initially wait before attempting a new (1000) }) and server fastify.register(require('fastify-websocket'), { handle(conn) { conn.pipe(conn) // creates an echo server }, options: { maxPayload: 1048576, verifyClient(info, next) { try { const token = info.req.headers['sec-websocket-protocol'] return next(true) } catch (err) { return next(false) } } } }) fastify.route({ method: 'GET', url: '/', handler: (req, reply) => { reply.send({ route: 'OK' }) }, wsHandler: (conn, req, params) => { conn.setEncoding('utf8') conn.on('data', chunk => { console.log(chunk) conn.socket.send("Message OK") }) } }) I hope it helps you. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#41?email_source=notifications&email_token=AMCRSVK4T4JVMYRPCJONX43QYTWINA5CNFSM4JUX3BNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG4EFOI#issuecomment-565723833>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMCRSVKS5UOMMZ752CL5WELQYTWINANCNFSM4JUX3BNA> .

--

[mcollina]

I'm sorry that you need something. However, this is open source and I have no bandwidth to help right now.

[satyamurthy515]

Np. When ever you are free just help me out😀.

…

On Sat, Dec 14, 2019, 9:44 PM Matteo Collina ***@***.***> wrote: I'm sorry that you *need* something. However, this is open source and I have no bandwidth to help right now. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#41?email_source=notifications&email_token=AMCRSVNPNNWQG7CCWE5JC43QYUA6NA5CNFSM4JUX3BNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG4F33I#issuecomment-565730797>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMCRSVN7PGO6AWVJ4TVHIPLQYUA6NANCNFSM4JUX3BNA> .

--

[mandaputtra]

@satyamurthy515

You can connect from websockets like these :

// Your front end code
// connect to server
const ws = new WebSocket()

// send to server
ws.send('message')

// receive messages
ws.on('message', (message) => {
  console.log(message)
})

No matter youre on React, Vue, Angular, or SomeWhatNewJSFramework, the API Of websocket is same take a look here

[satyamurthy515]

Thank you guys for your valuable comments. I got it.