1. บทนำ
ก่อนอื่นเว็บไซต์อย่างเป็นทางการของ socket.io: http://socket.io
เว็บไซต์อย่างเป็นทางการมีความรัดกุมมากและไม่มีเอกสาร API มีเพียง "วิธีใช้" ง่ายๆเท่านั้น เพราะ socket.io นั้นใช้งานง่ายและใช้งานง่ายเป็นเว็บไซต์ทางการ
Socket.io คืออะไร? Socket.io เป็นไลบรารี WebSocket ที่มี JS ฝั่งไคลเอ็นต์และ NodeJS ฝั่งเซิร์ฟเวอร์ เป้าหมายคือการสร้างแอปพลิเคชันแบบเรียลไทม์ที่สามารถใช้กับเบราว์เซอร์และอุปกรณ์มือถือที่แตกต่างกัน มันจะเลือกวิธีที่ดีที่สุดในการรับรู้แอปพลิเคชันเครือข่ายแบบเรียลไทม์โดยอัตโนมัติโดยใช้เบราว์เซอร์จากวิธีการต่าง ๆ เช่น WebSocket, Ajax Long Polling, Iframe Streaming ฯลฯ ซึ่งสะดวกและใช้งานง่ายมาก เบราว์เซอร์ที่รองรับอยู่ในระดับต่ำที่สุดเท่าที่ IE5.5 ซึ่งควรตอบสนองความต้องการมากที่สุด
2. การติดตั้งและการปรับใช้
2.1 การติดตั้ง
ก่อนอื่นการติดตั้งนั้นง่ายมากในสภาพแวดล้อม node.js เพียงหนึ่งประโยค:
การคัดลอกรหัสมีดังนี้:
npm socket.io
2.2 การรวม Express เพื่อสร้างเซิร์ฟเวอร์
Express เป็นเฟรมเวิร์กแอปพลิเคชันเว็บ Node.js ขนาดเล็กซึ่งมักใช้เมื่อสร้างเซิร์ฟเวอร์ HTTP ดังนั้นจึงมีการอธิบายโดยตรงกับ socket.io และ Express เป็นตัวอย่าง
การคัดลอกรหัสมีดังนี้:
var express = ต้องการ ('ด่วน')
, app = express ()
, server = require ('http'). createserver (แอพ)
, io = ต้องการ ('socket.io') ฟัง (เซิร์ฟเวอร์);
Server.Listen (3001);
หากคุณไม่ได้ใช้ Express โปรดดูที่ socket.io/#how-to-use
3. วิธีการใช้งานพื้นฐาน
ส่วนใหญ่แบ่งออกเป็นสองส่วนของรหัส: ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ซึ่งทั้งสองอย่างง่ายมาก
เซิร์ฟเวอร์ (app.js):
การคัดลอกรหัสมีดังนี้:
// เชื่อมต่อรหัสด้านบน
app.get ('/', function (req, res) {
res.sendfile (__ dirname + '/index.html');});
io.sockets.on ('การเชื่อมต่อ', ฟังก์ชั่น (ซ็อกเก็ต) {
Socket.emit ('News', {Hello: 'World'});
socket.on ('เหตุการณ์อื่น ๆ ', ฟังก์ชั่น (ข้อมูล) {
console.log (ข้อมูล);
-
-
ก่อนอื่นฟังก์ชั่น IO.Sockets.on ยอมรับสตริง "การเชื่อมต่อ" เป็นเหตุการณ์ที่ไคลเอนต์เริ่มต้นการเชื่อมต่อ เมื่อการเชื่อมต่อสำเร็จจะมีการเรียกใช้ฟังก์ชันการเรียกกลับพร้อมพารามิเตอร์ซ็อกเก็ต เมื่อเราใช้ socket.io เราจะจัดการคำขอของผู้ใช้ในฟังก์ชั่นการโทรกลับนี้
สิ่งที่สำคัญที่สุดเกี่ยวกับซ็อกเก็ตคือการปล่อยและเปิด อดีตส่ง (ปัญหา) เหตุการณ์ (ชื่อเหตุการณ์แสดงด้วยสตริง) ชื่อเหตุการณ์สามารถปรับแต่งได้และมีชื่อเหตุการณ์เริ่มต้นบางอย่างตามด้วยวัตถุระบุเนื้อหาที่ส่งไปยังซ็อกเก็ต หลังได้รับเหตุการณ์ (ชื่อเหตุการณ์จะถูกแสดงด้วยสตริง) ตามด้วยฟังก์ชั่นการโทรกลับที่ได้รับการเรียกเหตุการณ์ซึ่งข้อมูลคือข้อมูลที่ได้รับ
ในตัวอย่างข้างต้นเราส่งเหตุการณ์ข่าวและได้รับเหตุการณ์อื่น ๆ ดังนั้นลูกค้าควรได้รับการรับและส่งเหตุการณ์ที่สอดคล้องกัน ใช่รหัสไคลเอนต์นั้นตรงกันข้ามและคล้ายกับเซิร์ฟเวอร์มาก
client (client.js)
การคัดลอกรหัสมีดังนี้:
<script src = "/socket.io/socket.io.js"> </script>
<script>
var socket = io.connect ('http: // localhost');
socket.on ('ข่าว', ฟังก์ชั่น (ข้อมูล) {
console.log (ข้อมูล);
socket.emit ('เหตุการณ์อื่น ๆ ', {my: 'data'});
-
</script>
มีสองสิ่งที่ควรทราบ: เส้นทาง socket.io.js ต้องเขียนอย่างถูกต้อง ไฟล์ JS นี้ถูกวางไว้ในโฟลเดอร์ Node_Modules ทางฝั่งเซิร์ฟเวอร์ มันจะถูกเปลี่ยนเส้นทางเมื่อขอไฟล์นี้ ดังนั้นอย่าแปลกใจที่ไฟล์นี้ไม่มีอยู่ทางฝั่งเซิร์ฟเวอร์ แต่ทำไมมันยังทำงานได้ตามปกติ แน่นอนคุณสามารถคัดลอกไฟล์ socket.io.js ฝั่งเซิร์ฟเวอร์ไปยังท้องถิ่นและทำให้เป็นไฟล์ JS ฝั่งไคลเอ็นต์ดังนั้นคุณไม่จำเป็นต้องขอไฟล์ JS นี้จากโหนดเซิร์ฟเวอร์ทุกครั้งซึ่งช่วยเพิ่มเสถียรภาพ จุดที่สองคือการใช้ var socket = io.connect ('ที่อยู่เว็บไซต์หรือ IP'); ในการรับวัตถุซ็อกเก็ตจากนั้นคุณสามารถใช้ซ็อกเก็ตเพื่อส่งและรับกิจกรรม เกี่ยวกับการประมวลผลเหตุการณ์รหัสข้างต้นหมายความว่าหลังจากได้รับเหตุการณ์ "ข่าว" ข้อมูลที่ได้รับจะถูกพิมพ์และเหตุการณ์ "เหตุการณ์อื่น ๆ " จะถูกส่งไปยังเซิร์ฟเวอร์
หมายเหตุ: ชื่อเหตุการณ์เริ่มต้นในตัวเช่น "ตัดการเชื่อมต่อ" หมายถึงการเชื่อมต่อไคลเอนต์ถูกตัดการเชื่อมต่อ "ข้อความ" หมายถึงข้อความที่ได้รับ ฯลฯ สำหรับชื่อเหตุการณ์ที่กำหนดเองพยายามอย่าเพิ่มชื่อด้วยชื่อเหตุการณ์เริ่มต้นที่สร้างขึ้นในซ็อกเก็ต
4. API ทั่วไปอื่น ๆ
1). ออกอากาศไปยังลูกค้าทั้งหมด: socket.broadcast.emit ('ข้อความออกอากาศ');
2). เข้าห้อง (ใช้งานง่ายมาก! มันเทียบเท่ากับเนมสเปซซึ่งสามารถออกอากาศไปยังห้องที่เฉพาะเจาะจงโดยไม่ส่งผลกระทบต่อลูกค้าในห้องอื่นหรือไม่อยู่ในห้อง): socket.join ('ชื่อห้องของคุณ');
3). ข้อความออกอากาศไปยังห้อง (ผู้ส่งไม่สามารถรับข้อความ): socket.broadcast.to ('ชื่อห้องของคุณ'). ปล่อย ('ข้อความห้องพักออกอากาศ');
4). ข้อความออกอากาศไปยังห้อง (รวมถึงผู้ส่งสามารถรับข้อความได้) (API นี้เป็นของ io.sockets): io.sockets.in ('ชื่อห้องอื่น') emit ('ข้อความห้องพัก');
5). Force WebSocket Communication: (ไคลเอนต์) Socket.Send ('HI'), (เซิร์ฟเวอร์) ใช้ socket.on ('ข้อความ', ฟังก์ชั่น (ข้อมูล) {}) เพื่อรับ
5. สร้างห้องแชทโดยใช้ socket.io
ในที่สุดเราก็จบบทความนี้ด้วยตัวอย่างง่ายๆ การใช้ socket.io เพื่อสร้างห้องสนทนาคือประมาณ 50 บรรทัดของรหัสและเอฟเฟกต์การแชทแบบเรียลไทม์ก็ดีมาก รหัสคีย์ต่อไปนี้มีการโพสต์:
เซิร์ฟเวอร์ (socketchat.js)
การคัดลอกรหัสมีดังนี้:
// พจนานุกรมสำหรับการเชื่อมต่อไคลเอนต์เมื่อไคลเอนต์เชื่อมต่อกับเซิร์ฟเวอร์
// socketid ที่ไม่ซ้ำกันจะถูกสร้างขึ้นและพจนานุกรมจะถือการแมปของ socketId กับข้อมูลผู้ใช้ (ชื่อเล่น ฯลฯ )
var ConnectionList = {};
exports.startChat = function (io) {
io.sockets.on ('การเชื่อมต่อ', ฟังก์ชั่น (ซ็อกเก็ต) {
// บันทึก SocketID และชื่อผู้ใช้เมื่อเชื่อมต่อไคลเอนต์
var socketid = socket.id;
ConnectionList [SocketId] = {
ซ็อกเก็ต: ซ็อกเก็ต
-
// ผู้ใช้เข้าสู่กิจกรรมห้องแชทและออกอากาศชื่อผู้ใช้ของเขาไปยังผู้ใช้ออนไลน์รายอื่น
socket.on ('เข้าร่วม', ฟังก์ชั่น (ข้อมูล) {
socket.broadcast.emit ('broadcast_join', ข้อมูล);
ConnectionList [SocketId] .username = data.username;
-
// ผู้ใช้ออกจากเหตุการณ์ห้องแชทและออกอากาศการออกเดินทางไปยังผู้ใช้ออนไลน์รายอื่น
socket.on ('disconnect', function () {
if (ConnectionList [SocketID] .USERNAME) {
socket.broadcast.emit ('broadcast_quit', {
ชื่อผู้ใช้: ConnectionList [SocketID] .USERNAME
-
-
ลบ ConnectionList [SocketID];
-
// เหตุการณ์คำพูดของผู้ใช้ออกอากาศเนื้อหาของคำพูดไปยังผู้ใช้ออนไลน์รายอื่น
Socket.on ('Say', function (data) {
socket.broadcast.emit ('broadcast_say', {
ชื่อผู้ใช้: ConnectionList [SocketID] .USERNAME
ข้อความ: data.text
-
-
-
-
ไคลเอนต์ (socketchatclient.js)
การคัดลอกรหัสมีดังนี้:
var socket = io.connect ('http: // localhost');
// หลังจากเชื่อมต่อกับเซิร์ฟเวอร์ส่งเหตุการณ์ "เข้าร่วม" ทันทีและบอกชื่อผู้ใช้ของคุณอื่น ๆ
socket.emit ('เข้าร่วม', {
ชื่อผู้ใช้: 'ชื่อผู้ใช้ฮิฮิ'
-
// หลังจากได้รับการออกอากาศของการเข้าร่วมห้องแชทข้อความจะปรากฏขึ้น
socket.on ('broadcast_join', ฟังก์ชั่น (ข้อมูล) {
console.log (data.username + 'เพิ่มในห้องแชท');
-
// หลังจากได้รับการออกอากาศออกจากห้องแชทข้อความจะปรากฏขึ้น
socket.on ('broadcast_quit', ฟังก์ชั่น (ข้อมูล) {
console.log (data.username + 'ออกจากห้องแชท');
-
// หลังจากได้รับข้อความที่คนอื่นส่งข้อความจะปรากฏขึ้น
socket.on ('broadcast_say', ฟังก์ชั่น (ข้อมูล) {
console.log (data.username + 'say:' + data.text);
-
// ที่นี่เราคิดว่ามีกล่องข้อความ textarea และปุ่มส่ง butt.btn-send
// ผูกเหตุการณ์โดยใช้ jQuery
$ ('. btn-send') คลิก (ฟังก์ชั่น (e) {
// รับข้อความของกล่องข้อความ
var text = $ ('textarea'). val ();
// ส่งเหตุการณ์พูดและเซิร์ฟเวอร์จะออกอากาศเมื่อได้รับ
Socket.emit ('Say', {
ชื่อผู้ใช้: 'ชื่อผู้ใช้ฮิฮิ'
ข้อความ: ข้อความ
-
-
นี่คือการสาธิตห้องแชทง่าย ๆ ที่คุณสามารถขยายได้ตามที่คุณต้องการ Socket.io โดยทั่วไปคือการส่งและการประมวลผลการรับของเหตุการณ์ต่าง ๆ และความคิดนั้นง่ายมาก