Nuxt Socket.io Server Açmak

İlk adım olarak Nuxt’a nuxt-socket-io ve socket.io paketlerini paketini yüklüyoruz.

npm install nuxt-socket-io socket.io

socket.io paketini yeni bir socket server oluşturmak için kullanacağız. nuxt-socket-io paketini ise oluşturduğumuz servera client olarak bağlamak için kullanacağız.

Senaryomuz şu şekilde olacak. Nuxt ayağa kalkarken bir middleware oluşturacağız ve bu middleware üzerinde bir socket.io serveri oluşturacağız. Ayrıca bu dosya üzerinde socket.io eventlerini dinleyebileceğiz ve ona göre işlem yapabileceğiz.

Benim bu örnekte, sockete bağlanan bir kullanıcıyla haberleşmeyi, connection ve disconnect durumlarını ele aldım.

Nuxt projenizin ana dizininine serverMiddleware adında bir klasör oluşturun, içine ise socket-io-server.js adında bir dosya oluşturun.

serverMiddleware/socket-io-server.js

// 3001 portuna bir socket.io server açıyoruz
const io = require("socket.io")(3001, {
  cors: {
    // CORS takılmaması için
    origin: '*',
  }
});

// socket üzerindeki eventleri dinliyoruz
io.on('connection', function (socket) {
  console.log('Bağlantı sağlandı!');


  // bağlantı sağlayan kişiyi socket üzerine kayıt ediyoruz
  socket.on('saveMe', function (user) {
    socket.user = user;
    console.log('Kullanıcı Kayıt Edildi', user);

    socket.emit('saved', user);
  });

  socket.on('disconnect', function () {

    // kullanıcı çıkış yaptığında bunu handle ediyoruz
    console.log('Bağlantı koptu!', socket.user);
  });
});

// oluşturduğumuz middleware bir kısıta takılmadan devam ediyor. Aslında burada formaliteden bir middleware oluşturuldu.
export default function (req, res, next) {
  next()
}

Dosyamızı kayıt ettik ve burada 3001 portunda bir socket.io serveri ayağa kaldırmış olduk.

Şimdi bu yazdığımız middleware dosyasını Nuxta entegre edelim ki Nuxt her ayağa kalktığında socket.io serverimizde ayağa kalksın. Bunun için ana dizinde bulunan nuxt.config.js dosyasına şunları ekliyoruz.

modules: [
   'nuxt-socket-io', // array içine bu ekleniyor
],
// hemen altına ise bu ekleniyor
io: {
    sockets: [{
      name: 'main', // varsayılan main dir
      default: true,
      url: 'http://localhost:3001' // 3001 portundan sockete bağlanacağız
    }]
  }
// bununda altına az önce oluşturduğumuz js dosyasını ekliyoruz.
serverMiddleware: ["~/serverMiddleware/socket-io-server.js"],

Bu ayarları yaptığımızda Nuxt’u başlattığımızda socket.io serverimiz de başlatılacaktır.

Eğer Nuxt üzerinde Vuex kullanıyorsanuz state’e socket adında bir değişken eklemeniz gerekmektedir. Sıfır bir proje için store/index.js dosyası şöyle olmalıdır.

export default {
  state: () => ({
    socket: null // zorunlu
  })
}

Şimdi gelelim Nuxt’un Vue tarafında nasıl bu sockete bağlanacağımıza…

mounted() {
    // nuxt.config.js de tanımladığımız main isimli socketi kullanıyoruz
    this.socket = this.$nuxtSocket({
      name: "main" // main yazmak zorunda değiliz zaten varsayılan...
    });

    // socketa kendi bilgimizi kaydetmek için paket gönderiyoruz
    this.socket.emit('saveMe', {
      id: 10,
      username: 'ahmet'
    }, (res) => {
      console.log(res)}
    )
    // socket.io serverinin bize gönderdiği paketi alıyoruz.
    this.socket.on('saved', user => {
      console.log('kayıt oldum' , user);
    });
  }

İsterseniz bu socket bağlantısını default.vue layoutu üzerinde yapabilirsiniz.

Örnek bir çalışmayı github repoma attım isterseniz oradan da bakabilirsiniz.

https://github.com/ahmetugur91/nuxt-socket-disconnect