socket.io入門整理


我自己在用socket.io開發,對官方網站上的文檔,進行簡單的整理,然后自己寫了一個簡單的聊天程序。 最最開始

先安裝socket.io:

1 npm install socket.io

利用Node的搭建Http服務

分為兩個文件,服務端文件app.js和客戶端index.html

app.js 01 var app = require('http').createServer(handler) 02 , io = require('socket.io').listen(app) 03 , fs = require('fs') 04 05 app.listen(80); 06 07 function handler (req, res) { 08 fs.readFile(__dirname + '/index.html', 09 function (err, data) { 10 if (err) { 11 res.writeHead(500); 12 return res.end('Error loading index.html'); 13 } 14 15 res.writeHead(200); 16 res.end(data); 17 }); 18 } 19 20 io.sockets.on('connection', function (socket) { 21 socket.emit('news', { hello: 'world' }); 22 socket.on('my other event', function (data) { 23 console.log(data); 24 }); 25 });

這里需要注意的是: require(‘socket.io’).listen(app) 實際上這句就是講socket的監聽加入的app設置的http模塊了 io.sockets.on(‘connection’,function()…)這里設置了在連接后進行的處理,代碼示例中,主要包含兩件事,一個是向前段發送news的事件,一個是監聽my other event事件。

index.html 1 <script src="/socket.io/socket.io.js"></script> 2 <script> 3 var socket = io.connect('http://localhost'); 4 socket.on('news', function (data) { 5 console.log(data); 6 socket.emit('my other event', { my: 'data' }); 7 }); 8 </script>

客戶端一個引用了socket.io.js的javscript庫 還有就是連接服務器(通過io.connect(‘http://localhost’)) 之后在監聽收到news的事件后,發送my other event事件

利用Express3框架 上面的例子只是使用nodejs建立了一個交互,也可以使用express2的web框架, 具體app.js代碼如下:

v

ar app = require('express')() , server = require('http').createServer(app) , io = require('socket.io').listen(server); server.listen(80); app.get('/', function (req, res) { res.sendfile(__dirname + '/index.html'); }); io.sockets.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) { console.log(data); }); });

接收發送事件 socket.io允許用戶自定義發送接收的事件。除了connect,message,disconnect三個事件外,用戶可以自定義自己的事件

// note, io.listen(<port>) will create a http server for you var io = require('socket.io').listen(80); io.sockets.on('connection', function (socket) { io.sockets.emit('this', { will: 'be received by everyone'}); socket.on('private message', function (from, msg) { console.log('I received a private message by ', from, ' saying ', msg); }); socket.on('disconnect', function () { io.sockets.emit('user disconnected'); }); });

存儲數據 有的時候需要存儲一些和客戶端關聯的數據在會話里,socket.io也是支持的,代碼如下:

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); }); }); });

socket.set和socket.get方法分為用於設置和獲取變量。

設置命名空間 有的時候要一個程序支持多個應用,如果使用默認的 “/” 命名空間可能會比較混亂。如果想讓一個連接可以支持多個連接,可以使用如下的命名空間的方法:

app.js var io = require('socket.io').listen(80); 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.js <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>

發送獲取數據 有的時候,你需要在發送數據后,等待服務器的消息確認。當然簡單的發,可以通過兩次消息發送,來完成。這里介紹一種使用回調函數的方法:

app.js var io = require('socket.io').listen(80); io.sockets.on('connection', function (socket) { socket.on('ferret', function (name, fn) { fn('woot'); }); }); client.html <script> var socket = io.connect(); // TIP: .connect with no args does auto-discovery socket.on('connect', function () { // TIP: you can avoid listening on `connect` and listen on events directly too! socket.emit('ferret', 'tobi', function (data) { console.log(data); // data will be 'woot' }); }); </script>

廣播 向所有的連接觸發事件,這里注意:不包括本身連接的事件。

var io = require('socket.io').listen(80); io.sockets.on('connection', function (socket) { socket.broadcast.emit('user connected'); });

我寫的聊天程序:

index.html

<script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://localhost'); socket.on("notice", function(data){ var msg = document.getElementById('all').value; document.getElementById('all').innerText = msg + "\n" + data.message; }); var chat_fn = function(){ var msg = document.getElementById("message").value; socket.emit("chat", {message: msg}); }; socket.on("nickname ready", function(data){ alert("nickname changed."); }); var change_nickname = function(){ var nickname = document.getElementById("nickname").value; socket.emit('set nickname', nickname); }; </script> <textarea id="all" cols=40 rows=20></textarea> <br /> <label>Message:</label> <input id="message" type="text" name="message" cols=120/> <input id="chat_btn" type="button" value="chat" onclick="javascript:chat_fn()" /> <label>NickName:</label> <input id="nickname" typee="text" name="nickname" /> <input id="chang_name" type="button" value="nickname" onclick="javascript:change_nickname()" />

app.js

var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs = require('fs'); app.listen(80); function handler (req, res) { fs.readFile(__dirname + '/index.html', function (err, data) { if (err) { res.writeHead(500); return res.end('Error loading index.html'); } res.writeHead(200); res.end(data); }); } io.sockets.on('connection', function (socket) { // socket.emit('news', { hello: 'world' }); // socket.on('my other event', function (data) { // console.log(data); // }); socket.set('nickname', 'nickname', function(){ }); socket.on('set nickname', function(name){ socket.set('nickname', name, function(){ console.log("change nickname=>" + name); socket.emit('nickname ready'); }); }); socket.on('chat', function(data){ socket.get('nickname', function(err, name){ socket.emit("notice", {message: name + ":" + data.message}); socket.broadcast.emit("notice", {message: name + ":" + data.message}); console.log("chat: " + data.message); }); }); });

來源:https://cnodejs.org/topic/50a1fcc7637ffa4155b5a264


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM