Jaki jest przykład najprostszego z możliwych Socket.io przykład?
Więc starałem się zrozumieć Socket.io ostatnio, ale nie jestem super programistą i prawie każdy przykład, który mogę znaleźć w sieci (uwierz mi, szukałem przez wiele godzin), ma dodatkowe rzeczy, które komplikują sprawy. Wiele przykładów robi kilka rzeczy, które mnie mylą, lub łączą się z jakąś dziwną bazą danych, lub używają coffeescript lub ton bibliotek JS, które zaśmiecają wszystko.
Chciałbym zobaczyć podstawowy, działający przykład, w którym serwer wysyła wiadomość do klient co 10 sekund, mówiąc, która jest godzina, a Klient zapisuje te dane na stronie lub wyświetla alert, coś bardzo prostego. Następnie mogę dowiedzieć się rzeczy stamtąd, dodać rzeczy, których potrzebuję, jak połączenia db, itp. I tak sprawdziłem przykłady na socket.io strona i nie działają dla mnie, a ja nie rozumiem, co robią.
4 answers
Edit: wydaje mi się, że lepiej dla każdego skonsultować doskonały przykład czatu na Socket.IO strona startowa. API zostało dość uproszczone, ponieważ podałem tę odpowiedź. Mając to na uwadze, oto oryginalna odpowiedź zaktualizowana small-small dla nowszego API.
Tylko dlatego, że czuję się dziś miło:
Indeks.html
<!doctype html>
<html>
<head>
<script src='/socket.io/socket.io.js'></script>
<script>
var socket = io();
socket.on('welcome', function(data) {
addMessage(data.message);
// Respond with a message including this clients' id sent from the server
socket.emit('i am client', {data: 'foo!', id: data.id});
});
socket.on('time', function(data) {
addMessage(data.time);
});
socket.on('error', console.error.bind(console));
socket.on('message', console.log.bind(console));
function addMessage(message) {
var text = document.createTextNode(message),
el = document.createElement('li'),
messages = document.getElementById('messages');
el.appendChild(text);
messages.appendChild(el);
}
</script>
</head>
<body>
<ul id='messages'></ul>
</body>
</html>
App.js
var http = require('http'),
fs = require('fs'),
// NEVER use a Sync function except at start-up!
index = fs.readFileSync(__dirname + '/index.html');
// Send index.html to all requests
var app = http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(index);
});
// Socket.io server listens to our app
var io = require('socket.io').listen(app);
// Send current time to all connected clients
function sendTime() {
io.emit('time', { time: new Date().toJSON() });
}
// Send current time every 10 secs
setInterval(sendTime, 10000);
// Emit welcome message on connection
io.on('connection', function(socket) {
// Use socket to communicate with this particular client only, sending it it's own id
socket.emit('welcome', { message: 'Welcome!', id: socket.id });
socket.on('i am client', console.log);
});
app.listen(3000);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-01 07:03:02
Oto moje poddanie!
Jeśli umieścisz ten kod w pliku o nazwie hello.js i uruchom go za pomocą node hello.js powinien wydrukować wiadomość hello, została wysłana przez 2 gniazda.
Kod pokazuje, jak obsługiwać zmienne dla wiadomości hello przekazywanej z Klienta do serwera poprzez sekcję kodu oznaczoną jako / / Mirror.
Nazwy zmiennych są deklarowane lokalnie, a nie wszystkie na górze, ponieważ są używane tylko w każdej z sekcji między komentarze. Każdy z nich może znajdować się w osobnym pliku i działać jako własny węzeł.
// Server
var io1 = require('socket.io').listen(8321);
io1.on('connection', function(socket1) {
socket1.on('bar', function(msg1) {
console.log(msg1);
});
});
// Mirror
var ioIn = require('socket.io').listen(8123);
var ioOut = require('socket.io-client');
var socketOut = ioOut.connect('http://localhost:8321');
ioIn.on('connection', function(socketIn) {
socketIn.on('foo', function(msg) {
socketOut.emit('bar', msg);
});
});
// Client
var io2 = require('socket.io-client');
var socket2 = io2.connect('http://localhost:8123');
var msg2 = "hello";
socket2.emit('foo', msg2);Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-13 07:51:53
Może to może pomóc również Tobie. Miałem problem z owinęciem głowy jak socket.io zadziałało, więc starałem się jak najlepiej zagotować przykład.
Zaadaptowałem ten przykład z przykładu zamieszczonego tutaj: http://socket.io/get-started/chat/
Najpierw zacznij od pustego katalogu i utwórz bardzo prosty plik o nazwie pakiet.JSON umieść w nim następujące
{
"dependencies": {}
}
Następnie w wierszu poleceń użyj npm, aby zainstalować zależności, których potrzebujemy w tym przykładzie
$ npm install --save express socket.io
Może to potrwać kilka minut w zależności od szybkości połączenia sieciowego / procesora / itp. Aby sprawdzić, czy wszystko poszło zgodnie z planem, możesz spojrzeć na pakiet .JSON plik ponownie.
$ cat package.json
{
"dependencies": {
"express": "~4.9.8",
"socket.io": "~1.1.0"
}
}
Utwórz plik o nazwie serwer.js to będzie oczywiście nasz serwer obsługiwany przez węzeł. Umieść w nim następujący kod:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
//send the index.html file for all requests
res.sendFile(__dirname + '/index.html');
});
http.listen(3001, function(){
console.log('listening on *:3001');
});
//for testing, we're just going to send data to the client every second
setInterval( function() {
/*
our message we want to send to the client: in this case it's just a random
number that we generate on the server
*/
var msg = Math.random();
io.emit('message', msg);
console.log (msg);
}, 1000);
Tworzy ostatni plik o nazwie index.html i umieść poniższy kod w to.
<html>
<head></head>
<body>
<div id="message"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
socket.on('message', function(msg){
console.log(msg);
document.getElementById("message").innerHTML = msg;
});
</script>
</body>
</html>
Możesz teraz przetestować ten bardzo prosty przykład i zobaczyć wyniki podobne do poniższych:
$ node server.js
listening on *:3001
0.9575486415997148
0.7801907607354224
0.665313188219443
0.8101786421611905
0.890920243691653
Jeśli otworzysz przeglądarkę internetową i skierujesz ją na nazwę hosta, na którym uruchomiłeś proces węzła, powinieneś zobaczyć te same numery w przeglądarce, wraz z każdą inną połączoną przeglądarką, która patrzy na tę samą stronę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-21 19:37:35
Zdaję sobie sprawę, że ten post ma już kilka lat, ale czasami certyfikowani nowicjusze, tacy jak ja, potrzebują przykładu pracy, który jest całkowicie rozebrany do absolutnej najprostszej formy.
Każdy prosty socket.io przykład mogę znaleźć zaangażowane http.createServer (). ale co, jeśli chcesz dołączyć trochę socket.io magia na istniejącej stronie? oto absolutny najprostszy i najmniejszy przykład, jaki mogłem wymyślić.
To po prostu zwraca łańcuch przekazany z konsoli / Align = "left" /
App.js
var http = require('http');
var app = http.createServer(function(req, res) {
console.log('createServer');
});
app.listen(3000);
var io = require('socket.io').listen(app);
io.on('connection', function(socket) {
io.emit('Server 2 Client Message', 'Welcome!' );
socket.on('Client 2 Server Message', function(message) {
console.log(message);
io.emit('Server 2 Client Message', message.toUpperCase() ); //upcase it
});
});
Indeks.html:
<!doctype html>
<html>
<head>
<script type='text/javascript' src='http://localhost:3000/socket.io/socket.io.js'></script>
<script type='text/javascript'>
var socket = io.connect(':3000');
// optionally use io('http://localhost:3000');
// but make *SURE* it matches the jScript src
socket.on ('Server 2 Client Message',
function(messageFromServer) {
console.log ('server said: ' + messageFromServer);
});
</script>
</head>
<body>
<h5>Worlds smallest Socket.io example to uppercase strings</h5>
<p>
<a href='#' onClick="javascript:socket.emit('Client 2 Server Message', 'return UPPERCASED in the console');">return UPPERCASED in the console</a>
<br />
socket.emit('Client 2 Server Message', 'try cut/paste this command in your console!');
</p>
</body>
</html>
Do uruchomienia:
npm init; // accept defaults
npm install socket.io http --save ;
node app.js &
Użyj czegoś takiego test portu, aby upewnić się, że twój port jest otwarty.
Teraz przejdź do http://localhost/index.html i za pomocą konsoli przeglądarki wysyłać wiadomości z powrotem do serwera.
Najlepiej zgadywać, używając http.createServer, zmienia dla Ciebie następujące dwie linie:
<script type='text/javascript' src='/socket.io/socket.io.js'></script>
var socket = io();
Mam nadzieję, że ten bardzo prosty przykład oszczędzi trochę moim kolegom nowicjuszom zmagania. i proszę zauważyć, że trzymałem się z dala od używania "słowa kluczowego", szukając nazw zmiennych zdefiniowanych przez użytkownika dla moich definicji gniazd.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-17 22:15:12