hujung hadapan web
tutorial js
Pengenalan kepada HTML5 WebSocket 3 - Kemahiran model komunikasi socket.io_javascript
Pengenalan kepada HTML5 WebSocket 3 - Kemahiran model komunikasi socket.io_javascript
Mengapa socket.io dilahirkan? Sila lihat penerangan teks di bawah.
Mengapa anda memerlukan socket.io?
Node.js menyediakan persekitaran operasi bahagian pelayan yang cekap, tetapi disebabkan sokongan berbeza untuk HTML5 pada bahagian penyemak imbas, agar serasi dengan semua penyemak imbas, memberikan pengalaman pengguna masa nyata yang sangat baik dan menyediakan pelanggan dan perkhidmatan untuk pengaturcara Untuk menyediakan pengalaman pengaturcaraan yang konsisten, socket.io dilahirkan.
Matlamat reka bentuk socket.io adalah untuk menyokong mana-mana pelayar dan mana-mana peranti mudah alih. Pada masa ini menyokong penyemak imbas PC arus perdana (IE, Safari, Chrome, Firefox, Opera, dll.) dan penyemak imbas Mudah Alih (iphone Safari/ipad Safari/android WebKit/WebOS WebKit, dsb.).
Socket.io adalah berdasarkan node.js dan memudahkan API WebSocket, menyatukan pelbagai API komunikasi. Ia menyokong: WebSocket, Flash Socket, undian panjang AJAX, penstriman berbilang bahagian AJAX, Forever IFrame, tinjauan JSONP.
Socket.io menyelesaikan masalah komunikasi masa nyata dan menyatukan kaedah pengaturcaraan pelayan dan pelanggan. Selepas memulakan soket, ia seperti mewujudkan saluran paip antara pelanggan dan pelayan, dan kedua-dua pihak boleh berkomunikasi antara satu sama lain.
Pasang
Laksanakan dalam baris arahan: npm install socket.io untuk memasang.
Model pengaturcaraan sisi pelayan
Pengaturcaraan sisi pelayan masih sama seperti pelayan biasa, memulakan pelayan, menyediakan perkhidmatan dan memproses acara.
Sebagai contoh, pelayan.js berikut:
var http = require('http')
, url = require('url')
, fs = require('fs')
, server;
server = http.createServer(function(req, res){
// your normal server code
var path = url.parse(req.url).pathname;
switch (path){
case '/':
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<h1>Hello! Try the <a href="/index.html">Socket.io Test</a></h1>');
res.end();
break;
case '/index.html':
fs.readFile(__dirname + path, function(err, data){
if (err) return send404(res);
res.writeHead(200, {'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'})
res.write(data, 'utf8');
res.end();
});
break;
default: send404(res);
}
}),
send404 = function(res){
res.writeHead(404);
res.write('404');
res.end();
};
server.listen(8080);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket){
console.log("Connection " + socket.id + " accepted.");
socket.on('message', function(message){
console.log("Received message: " + message + " - from client " + socket.id);
});
socket.on('disconnect', function(){
console.log("Connection " + socket.id + " terminated.");
});
});Model Pengaturcaraan Pelanggan
Pengaturcaraan pelanggan juga dikendalikan dengan cara yang sama, menyambung ke pelayan dan bertukar maklumat.
Contohnya, halaman index.html berikut:
<!doctype html>
<html>
<head>
<title>Socket.io Test</title>
<script src="/json.js"></script> <!-- for ie -->
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<script>
var socket;
var firstconnect = true;
function connect() {
if(firstconnect) {
socket = io.connect(null);
socket.on('message', function(data){ message(data); });
socket.on('connect', function(){ status_update("Connected to Server"); });
socket.on('disconnect', function(){ status_update("Disconnected from Server"); });
socket.on('reconnect', function(){ status_update("Reconnected to Server"); });
socket.on('reconnecting', function( nextRetry ){ status_update("Reconnecting in "
+ nextRetry + " seconds"); });
socket.on('reconnect_failed', function(){ message("Reconnect Failed"); });
firstconnect = false;
}
else {
socket.socket.reconnect();
}
}
function disconnect() {
socket.disconnect();
}
function message(data) {
document.getElementById('message').innerHTML = "Server says: " + data;
}
function status_update(txt){
document.getElementById('status').innerHTML = txt;
}
function esc(msg){
return msg.replace(/</g, '<').replace(/>/g, '>');
}
function send() {
socket.send("Hello Server!");
};
</script>
<h1>Socket.io Test</h1>
<div><p id="status">Waiting for input</p></div>
<div><p id="message"></p></div>
<button id="connect" onClick='connect()'/>Connect</button>
<button id="disconnect" onClick='disconnect()'>Disconnect</button>
<button id="send" onClick='send()'/>Send Message</button>
</body>
</html>Nota
1. Untuk memulakan pelayan, biarkan ia di nod Buka tetingkap baris arahan, navigasi ke folder di mana server.js berada, dan masukkan node server.js untuk memulakan pelayan.
Dalam index.html di atas, perhatikan baris ini: . Jika anda tidak mahu menggunakan skrip socket.io tempatan, anda boleh
Untuk terus menggunakan skrip awam berikut:
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
Juga perhatikan baris ini: soket = io.connect(null).
Nol di sini mewakili sambungan ke perkhidmatan setempat, yang boleh digantikan dengan "localhost" dan kesannya akan sama.
2. Anda boleh menggunakan socket.io untuk memulakan perkhidmatan http secara langsung.
Contohnya:
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
io.sockets.emit('this', { will: 'be received by everyone'});
});3 Socket.io boleh menghantar mesej terus melalui kaedah hantar dan menerima mesej menggunakan acara mesej, contohnya:
//server.js
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.on('message', function () { });
});
//index.html
<script>
var socket = io.connect('http://localhost/');
socket.on('connect', function () {
socket.send('hi');
socket.on('message', function (msg) {
// my msg
});
});
</script>4. Menghantar dan memproses data
Kedua-dua hujung boleh menghantar acara antara satu sama lain, menghantar data antara satu sama lain dan berkomunikasi antara satu sama lain. Kod untuk menghantar acara ialah: socket.emit(tindakan, data, fungsi), di mana tindakan ialah nama acara, data ialah data, dan fungsi ialah fungsi panggil balik kod untuk memproses acara ialah: soket. on(action, function), if emit sends Apabila terdapat data, parameter dalam fungsi mengandungi data ini. Selain menghantar dan memproses acara terbina dalam, socket.io seperti sambung, putuskan sambungan, mesej. Juga membenarkan penghantaran dan pengendalian acara tersuai, seperti:
//Pelayan:
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});//Pelanggan:
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>5. Seperti yang dapat dilihat dari atas, kedua-dua hantar dan pancaran boleh digunakan semasa menghantar data. Cuma emit mengukuhkan pemprosesan acara tersuai.
6. Anda boleh menggunakan kaedah get/set soket pada bahagian pelayan untuk menyimpan data yang berkaitan pada bahagian klien, contohnya:
//Pelayan
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.on('set nickname', function (name) {
socket.set('nickname', name, function () { socket.emit('ready'); });
});
socket.on('msg', function () {
socket.get('nickname', function (err, name) {
console.log('Chat message by ', name);
});
});
});//Pelanggan
<script>
var socket = io.connect('http://localhost');
socket.on('connect', function () {
socket.emit('set nickname', confirm('What is your nickname?'));
socket.on('ready', function () {
console.log('Connected !');
socket.emit('msg', confirm('What is your message?'));
});
});
</script>7. Anda boleh menyiarkan mesej, seperti menghantar mesej kepada semua orang dalam bilik sembang kecuali sambungan soket semasa.
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.broadcast.emit('user connected');
});8. Pelbagai saluran bebas boleh diwujudkan dalam pautan yang sama dan bukannya mewujudkan berbilang pautan. Nama rasmi ini ialah "ruang nama berbilang", seperti contoh rasmi:
var io = require('socket.io').listen(80);
//Server
var chat = io
.of('/chat')
.on('connection', function (socket) {
socket.emit('a message', {
that: 'only'
, '/chat': 'will get'
});
chat.emit('a message', {
everyone: 'in'
, '/chat': 'will get'
});
});
var news = io
.of('/news')
.on('connection', function (socket) {
socket.emit('item', { news: 'item' });
});
//Client
<script>
var chat = io.connect('http://localhost/chat')
, news = io.connect('http://localhost/news');
chat.on('connect', function () {
chat.emit('hi!');
});
news.on('news', function () {
news.emit('woot');
});
</script> konfigurasi socket.io
Konfigurasi socket.io sangat mudah Jika anda telah mengkonfigurasi ekspres, anda akan mendapati bahawa mereka menggunakan kaedah yang hampir sama. Mari lihat contoh kecil dahulu:
var io = require('socket.io').listen(80);
io.configure('production', function(){
io.enable('browser client etag');
io.set('log level', 1);
io.set('transports', [
'websocket'
, 'flashsocket'
, 'htmlfile'
, 'xhr-polling'
, 'jsonp-polling'
]);
});
io.configure('development', function(){
io.set('transports', ['websocket']);
});Seperti yang anda lihat, socket.io menggunakan konfigurasi, tetapkan, dayakan dan lumpuhkan untuk konfigurasi.
1. Gunakan kaedah konfigurasi untuk mengkonfigurasi tingkah laku dalam persekitaran operasi yang berbeza, iaitu, membolehkan pilihan konfigurasi yang berbeza dalam persekitaran yang berbeza. Parameter pertama konfigurasi ialah persekitaran berjalan, dan parameter kedua ialah fungsi untuk konfigurasi. Persekitaran berjalan biasanya pengeluaran atau pembangunan Sudah tentu, sebarang rentetan boleh digunakan di sini. Jika parameter konfigurasi pertama diabaikan, ini bermakna konfigurasi berikutnya adalah awam dan sah tidak kira apa persekitarannya.
2. Selepas mengkonfigurasi pelbagai persekitaran operasi, bagaimana anda menetapkan persekitaran yang sedang dijalankan? Ini dicapai dengan mengubah suai nilai pembolehubah persekitaran NODE_ENV pada baris arahan.
3. Dalam fungsi konfigurasi konfigurasi, kita boleh menggunakan set, dayakan dan lumpuhkan untuk menetapkan pilihan yang berkaitan.
4. Rujukan untuk item boleh dikonfigurasikan khusus: https://github.com/LearnBoost/Socket.IO/wiki/Configuring-Socket.IO
Rujukan praktikal
Pengenalan Socket.io: http://davidchambersdesign.com/getting-started-with-socket.io/
pemasangan dan arahan penggunaan socket.io: http://socket.io/
Socket.io Wiki: https://github.com/LearnBoost/Socket.IO/wiki
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Pengenalan kepada fungsi Python: Pengenalan dan contoh fungsi exec
Nov 03, 2023 pm 02:09 PM
Pengenalan kepada fungsi Python: Pengenalan dan contoh fungsi exec Pengenalan: Dalam Python, exec ialah fungsi terbina dalam yang digunakan untuk melaksanakan kod Python yang disimpan dalam rentetan atau fail. Fungsi exec menyediakan cara untuk melaksanakan kod secara dinamik, membolehkan program menjana, mengubah suai dan melaksanakan kod seperti yang diperlukan semasa masa jalan. Artikel ini akan memperkenalkan cara menggunakan fungsi exec dan memberikan beberapa contoh kod praktikal. Cara menggunakan fungsi exec: Sintaks asas fungsi exec adalah seperti berikut: exec
Fungsi Oracle DECODE penjelasan terperinci dan contoh penggunaan
Mar 08, 2024 pm 03:51 PM
Fungsi DECODE dalam Oracle ialah ungkapan bersyarat yang sering digunakan untuk mengembalikan hasil yang berbeza berdasarkan keadaan yang berbeza dalam pernyataan pertanyaan. Artikel ini akan memperkenalkan sintaks, penggunaan dan kod sampel bagi fungsi DECODE secara terperinci. 1. sintaks fungsi DECODE DECODE(expr,search1,result1[,search2,result2,...,default]) expr: ungkapan atau medan yang hendak dibandingkan. carian1,
Spesifikasi dan contoh lekukan bahasa Go
Mar 22, 2024 pm 09:33 PM
Spesifikasi lekukan dan contoh bahasa Go adalah bahasa pengaturcaraan yang dibangunkan oleh Google Ia terkenal dengan sintaksnya yang ringkas dan jelas, yang mana spesifikasi lekukan memainkan peranan penting dalam kebolehbacaan dan keindahan kod. Artikel ini akan memperkenalkan spesifikasi lekukan bahasa Go dan menerangkan secara terperinci melalui contoh kod tertentu. Spesifikasi lekukan Dalam bahasa Go, tab digunakan untuk lekukan dan bukannya ruang. Setiap tahap lekukan ialah satu tab, biasanya ditetapkan kepada lebar 4 ruang. Spesifikasi sedemikian menyatukan gaya pengekodan dan membolehkan pasukan bekerjasama untuk menyusun
Pengenalan kepada fungsi Python: Penggunaan dan contoh fungsi abs
Nov 03, 2023 pm 12:05 PM
Pengenalan kepada fungsi Python: penggunaan dan contoh fungsi abs 1. Pengenalan kepada penggunaan fungsi abs Dalam Python, fungsi abs ialah fungsi terbina dalam yang digunakan untuk mengira nilai mutlak nilai tertentu. Ia boleh menerima hujah berangka dan mengembalikan nilai mutlak nombor itu. Sintaks asas fungsi abs adalah seperti berikut: abs(x) dengan x ialah parameter berangka untuk mengira nilai mutlak, yang boleh menjadi integer atau nombor titik terapung. 2. Contoh fungsi abs Di bawah kami akan menunjukkan penggunaan fungsi abs melalui beberapa contoh khusus: Contoh 1: Pengiraan
Pengenalan kepada fungsi Python: Penggunaan dan contoh fungsi isinstance
Nov 04, 2023 pm 03:15 PM
Pengenalan kepada fungsi Python: Penggunaan dan contoh fungsi isinstance Python ialah bahasa pengaturcaraan berkuasa yang menyediakan banyak fungsi terbina dalam untuk menjadikan pengaturcaraan lebih mudah dan cekap. Salah satu fungsi terbina dalam yang sangat berguna ialah fungsi isinstance(). Artikel ini akan memperkenalkan penggunaan dan contoh fungsi isinstance dan memberikan contoh kod khusus. Fungsi isinstance() digunakan untuk menentukan sama ada objek ialah contoh kelas atau jenis tertentu. Sintaks fungsi ini adalah seperti berikut
Pengenalan kepada fungsi Python: fungsi dan contoh fungsi eval
Nov 04, 2023 pm 12:24 PM
Pengenalan kepada fungsi Python: fungsi dan contoh fungsi eval Dalam pengaturcaraan Python, fungsi eval ialah fungsi yang sangat berguna. Fungsi eval boleh melaksanakan rentetan sebagai kod program, dan fungsinya sangat berkuasa. Dalam artikel ini, kami akan memperkenalkan fungsi terperinci bagi fungsi eval, serta beberapa contoh penggunaan. 1. Fungsi fungsi eval Fungsi fungsi eval adalah sangat mudah Ia boleh melaksanakan rentetan sebagai kod Python. Ini bermakna kita boleh menukar rentetan
Pengenalan kepada fungsi Python: fungsi dan contoh fungsi disusun
Nov 03, 2023 pm 02:47 PM
Pengenalan kepada fungsi Python: fungsi dan contoh fungsi disusun Python ialah bahasa pengaturcaraan yang sangat berkuasa dengan pelbagai fungsi dan modul terbina dalam. Dalam siri artikel ini, kami akan memperkenalkan fungsi Python yang biasa digunakan satu demi satu dan memberikan contoh yang sepadan untuk membantu pembaca memahami dan menggunakan fungsi ini dengan lebih baik. Artikel ini akan memperkenalkan fungsi dan contoh fungsi yang disusun secara terperinci. Fungsi diisih digunakan untuk mengisih objek boleh lelar dan mengembalikan senarai diisih baharu. Boleh digunakan untuk nombor dan perkataan
Aplikasi dan analisis contoh pengendali titik PHP
Mar 28, 2024 pm 12:06 PM
Aplikasi dan analisis contoh pengendali titik PHP Dalam PHP, pengendali titik (".") ialah operator yang digunakan untuk menyambung dua rentetan Ia sangat biasa digunakan dan sangat fleksibel apabila menggabungkan rentetan. Dengan menggunakan pengendali titik, kita boleh menggabungkan berbilang rentetan dengan mudah untuk membentuk rentetan baharu. Berikut akan memperkenalkan penggunaan operator titik PHP melalui analisis contoh. 1. Penggunaan asas Mula-mula, mari kita lihat contoh penggunaan asas. Katakan terdapat dua pembolehubah $str1 dan $str2, yang masing-masing menyimpan dua perkataan.
