Ana içeriğe geç

Socket.IOyu Entegre Etme - Eğitim Adımı

Socket.IO'yu Entegre Etme

Socket.IO iki bölümden oluşur:

  • Node.JS HTTP Sunucusu ile entegre olan (veya montaj yapılan) bir sunucu (socket.io paketi)
  • Tarayıcı tarafında yüklenen bir istemci kütüphanesi (socket.io-client paketi)

Geliştirme sırasında, socket.io bizim için istemciyi otomatik olarak sunar, göreceğimiz gibi, bu nedenle şimdilik yalnızca bir modül yüklememiz yeterlidir:

npm install socket.io

Bu, modülü yükleyecek ve package.json dosyasına bağımlılığı ekleyecektir. Şimdi index.js dosyasını bunu eklemek için düzenleyelim:

const express = require('express');
const { createServer } = require('node:http');
const { join } = require('node:path');
const { Server } = require('socket.io');

const app = express();
const server = createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
res.sendFile(join(__dirname, 'index.html'));
});

io.on('connection', (socket) => {
console.log('a user connected');
});

server.listen(3000, () => {
console.log('server running at http://localhost:3000');
});
import express from 'express';
import { createServer } from 'node:http';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';
import { Server } from 'socket.io';

const app = express();
const server = createServer(app);
const io = new Server(server);

const __dirname = dirname(fileURLToPath(import.meta.url));

app.get('/', (req, res) => {
res.sendFile(join(__dirname, 'index.html'));
});

io.on('connection', (socket) => {
console.log('a user connected');
});

server.listen(3000, () => {
console.log('server running at http://localhost:3000');
});

socket.io'nun yeni bir örneğini server (HTTP sunucusu) nesnesini geçirerek başlattığımı unutmayın. Daha sonra gelen soketler için connection olayını dinliyorum ve bu durumu konsola yazdırıyorum.

Şimdi index.html dosyasına `` (gövde son etiketi) öncesinde aşağıdaki kodu ekleyin:

<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
</script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>

socket.io-client'i yüklemek için gereken her şey bu kadar; bu, io globalini (ve GET /socket.io/socket.io.js son noktasını) sunar ve ardından bağlantıyı kurar.

Yerel istemci tarafı JS dosyasını kullanmak isterseniz, node_modules/socket.io/client-dist/socket.io.js yolunda bulabilirsiniz.

ipucu

Yerel dosyalar yerine bir CDN kullanabilirsiniz (örn. ``).

io() çağrısında herhangi bir URL belirlemediğimi unutmayın; çünkü bu, sayfayı sunan ana makineye bağlanmayı denemek için varsayılan ayardır.

not

Eğer apache veya nginx gibi bir ters proxy arkasındaysanız, lütfen belgelere bakın.

Uygulamanızı web sitenizin kökü olmayan bir klasörde (örn. https://example.com/chatapp) barındırıyorsanız, hem sunucuda hem de istemcide yolu belirtmeniz gerekir.

Şimdi süreci yeniden başlatırsanız (Control+C tuşuna basarak ve node index.js komutunu tekrar çalıştırarak) ve ardından web sayfasını yenilerseniz, konsolda "a user connected" mesajını görmelisiniz.

Birden fazla sekme açmayı deneyin; birkaç mesaj göreceksiniz.

Her soket ayrıca özel bir disconnect olayını tetikler:

io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});

Ardından, bir sekmeyi birkaç kez yenilerseniz, bunu eylemde görebilirsiniz.

bilgi

Bu örneği doğrudan tarayıcınızda çalıştırabilirsiniz:

Bu örneği doğrudan tarayıcınızda çalıştırabilirsiniz: