บทความนี้จะอธิบายขั้นตอนการสร้างการเชื่อมต่อ webSocket ใน Node.js
จะสร้างการเชื่อมต่อ WebSocket ใน Node.js ได้อย่างไร
การเชื่อมต่อ WebSocket ประกอบด้วยสองส่วน: การพัฒนาในฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ เว็บไซต์จำลองยังต้องสร้างซึ่งทำหน้าที่เป็นสื่อกลางระหว่างทั้งสองฝ่าย เมื่อใช้ข้อความจะถูกถ่ายโอนจากทั้งสองฝ่าย เยี่ยมชมขั้นตอนด้านล่างสำหรับการสร้าง WebSocket ใน NodeJs
ขั้นตอนที่ 1: การตั้งค่าสภาพแวดล้อม NodeJs
ด้วยความช่วยเหลือของ “ ซีดี ” คำสั่ง สำรวจผ่านโฟลเดอร์โครงการและภายในนั้นดำเนินการคำสั่ง “ npm เริ่มต้น -y ” เพื่อติดตั้งโมดูล NodeJs เริ่มต้น:
เวลาเริ่มต้น npm - - และ
หลังจากดำเนินการคำสั่งข้างต้นแล้ว ไฟล์ใหม่ชื่อ “ แพ็คเกจ.json ” ซึ่งเก็บข้อมูลพื้นฐานที่เกี่ยวข้องกับโครงการที่สร้างขึ้น:
ขั้นตอนที่ 2: การติดตั้งโมดูล WebSocket
หากต้องการใช้โปรโตคอล WebSocket โมดูลชื่อ “ ส ” จำเป็นต้องติดตั้งในโครงการ NodeJs คำสั่งสำหรับการติดตั้งถูกแทรกไว้ด้านล่าง:
ติดตั้ง npm ด้วย
ผลลัพธ์ด้านล่างแสดง “ ส ” ได้รับการติดตั้งในไดเร็กทอรี NodeJs ที่ต้องการ:
ขั้นตอนที่ 3: การตั้งค่าเซิร์ฟเวอร์ WebSocket
หากต้องการตั้งค่าฝั่งเซิร์ฟเวอร์ของโปรโตคอล webSocket ให้สร้าง 'ใหม่ .js ” พิมพ์ไฟล์ภายในโฟลเดอร์โครงการด้วยชื่อ “ ฝั่งเซิร์ฟเวอร์ ” และใส่โค้ดที่ระบุด้านล่าง:
ค่าคงที่ wsObj = จำเป็นต้อง ( 'เป็น' ) ;ค่าคงที่ ส = ใหม่ wsObj. เซิร์ฟเวอร์ ( { ท่าเรือ : : 3000 } ) ;
คอนโซล บันทึก ( 'เซิร์ฟเวอร์ Linux ได้เริ่มต้นแล้ว' ) ;
คำอธิบายสำหรับโค้ดข้างต้นมีดังนี้:
- ประการแรกด้วยความช่วยเหลือของ “ จำเป็นต้อง() ” วิธีการ “ ส ” โมดูลที่ติดตั้งไว้แล้วในส่วนด้านบนจะถูกนำเข้าภายในปัจจุบัน “ เซิร์ฟเวอร์ไซด์.js ' ไฟล์.
- จากนั้นเรียกใช้ ' เซิร์ฟเวอร์() ” วิธีการใช้วัตถุของ “ ส ” โมดูลชื่อ “ wsObj ” และส่งหมายเลขพอร์ตของ “ 3000 ” เพื่อเริ่มเซิร์ฟเวอร์ที่พอร์ตที่ระบุของ Localhost
- นอกจากนี้ ให้แสดงข้อความสุ่มบนหน้าต่างคอนโซลเพื่อยืนยันว่าเซิร์ฟเวอร์เริ่มต้นจากฝั่งเซิร์ฟเวอร์
ขั้นตอนที่ 4: การตั้งค่าไคลเอนต์ WebSocket
สร้างไฟล์อื่นที่มีชื่อ “ ด้านลูกค้า ” เพื่อตั้งค่าฝั่งไคลเอ็นต์ที่เชื่อมต่อกับเซิร์ฟเวอร์ ใส่โค้ดด้านล่างเพื่อตั้งค่าฝั่งไคลเอ็นต์พื้นฐานซึ่งจะแสดงข้อความสุ่มเมื่อเชื่อมต่อผ่านเซิร์ฟเวอร์:
ค่าคงที่ วัตถุประสงค์ = ใหม่ เว็บซ็อกเก็ต ( 'ws://localhost:3000' ) ;วัตถุประสงค์ addEventListener ( 'เปิด' , ( ) => {
คอนโซล บันทึก ( 'คุณเชื่อมต่อกับเซิร์ฟเวอร์ Linuxhint แล้ว!' ) ;
} ) ;
คำอธิบายสำหรับบล็อกโค้ดข้างต้น:
- ขั้นแรก สร้างวัตถุใหม่สำหรับ ' เว็บซ็อกเก็ต() ” โปรโตคอลที่รับฟังที่ Localhost โดยมีหมายเลขพอร์ตเป็น “ 3000 '.
- จากนั้นเก็บวัตถุใหม่ในตัวแปรชื่อ “ วัตถุประสงค์ '.
- หลังจากนั้นแนบ event Listener ของ “ เปิด ' ด้วยสิ่งนี้ ' วัตถุประสงค์ '. ผู้ฟังเหตุการณ์นี้จะเรียกใช้ฟังก์ชันที่ไม่ระบุชื่อเมื่อเซิร์ฟเวอร์โหลดบน Localhost ด้วยหมายเลขพอร์ตที่ให้ไว้
- ฟังก์ชันนี้จะแสดงข้อความที่เกี่ยวข้องกับการเชื่อมต่อแบบสุ่มบนคอนโซล
ขั้นตอนที่ 5: การสร้างเว็บเพจ
ภายในไดเร็กทอรีโครงการ ให้สร้าง ' .html ” พิมพ์ไฟล์ชื่อ “ ดัชนี ” ที่มีโครงสร้างพื้นฐานของ HTML พร้อมด้วยแท็กสคริปต์เดียวเพื่อนำเข้า “ clientSide.js ' ไฟล์:
DOCTYPE html >< html เท่านั้น = 'ใน' >
< ศีรษะ >
< ชุดอักขระเมตา = 'UTF-8' >
< ชื่อ > ลูกค้า ชื่อ >
ศีรษะ >
< ร่างกาย >
< h1 > เว็บไซต์ Linuxhint h1 >
ร่างกาย >
< สคริปต์ src = 'clientSide.js' > สคริปต์ >
html >
ขั้นตอนที่ 6: การดำเนินการ
เปิด ' ดัชนี.html ” บนเว็บเพจโดยตรงจากไดเร็กทอรี จากนั้น ย้ายไปที่เทอร์มินัลหรือพรอมต์คำสั่งแล้วดำเนินการคำสั่งด้านล่าง:
โหนดเซิร์ฟเวอร์ไซด์ 
ข้อความเอาท์พุตแสดงว่าเซิร์ฟเวอร์ได้เริ่มต้นแล้ว
ตอนนี้โดยไม่ต้องปิดเซิร์ฟเวอร์ ให้ไปที่ index.html และเปิดผ่านเว็บเบราว์เซอร์ ข้อความแสดงความสำเร็จในการเชื่อมต่อจะปรากฏบนหน้าต่างคอนโซล:
ผลลัพธ์แสดงการเชื่อมต่อที่ถูกสร้างขึ้นระหว่างไคลเอนต์และฝั่งเซิร์ฟเวอร์ บล็อกนี้ได้อธิบายกระบวนการสร้างการเชื่อมต่อ webSocket ใน NodeJs
บทสรุป
หากต้องการสร้างการเชื่อมต่อ webSocket ใน NodeJs ให้สร้างโปรเจ็กต์ NodeJs ใหม่และติดตั้ง “ ส ” โมดูลโดยการเรียกใช้ “ ติดตั้ง npm ด้วย ' สั่งการ. ตอนนี้สร้างไฟล์สำหรับฝั่งเซิร์ฟเวอร์และนำเข้าไฟล์ภายใน ' ส ' โมดูล. ใช้โมดูลนี้เพื่อสร้างเซิร์ฟเวอร์ WebSocket ที่พอร์ต “ 3000 '. สร้างไฟล์อื่นสำหรับฝั่งไคลเอ็นต์ซึ่งคุณต้องกำหนดวัตถุใหม่สำหรับ ' เว็บซ็อกเก็ต ” ชื่อ “ วัตถุประสงค์ ” และทำให้มันฟังที่ท่าเรือ “ 3000 '. บล็อกนี้ได้อธิบายขั้นตอนการสร้างการเชื่อมต่อ WebSocket ใน NodeJs