วันนี้ฉันจะใช้ห้องแชทอย่างง่ายโดยใช้ nodejs ในพื้นหลังและ socket.io ในการสื่อสารไคลเอนต์และเซิร์ฟเวอร์ นี่เป็นเฟรมเวิร์ก WebSocket ที่ค่อนข้างครบกำหนด
งานเริ่มต้น
1. ติดตั้ง Express ใช้สิ่งนี้เพื่อโฮสต์ Socket.io และหน้าคงที่ คำสั่ง NPM ติดตั้ง Express - -Save -SAVE สามารถเพิ่มแพ็คเกจลงในไฟล์ Package.json
2. ติดตั้ง socket.io และคำสั่ง npm ติดตั้ง socket.io - -save
การเขียนรหัสเซิร์ฟเวอร์
ก่อนอื่นเราโฮสต์เว็บไซต์ผ่าน Express และแนบกับอินสแตนซ์ socket.io เนื่องจากการเชื่อมต่อครั้งแรกของ socket.io ต้องใช้โปรโตคอล HTTP
การคัดลอกรหัสมีดังนี้:
var express = ต้องการ ('ด่วน')
io = ต้องการ ('socket.io');
var app = express ();
app.use (express.static (__ dirname));
var server = app.listen (8888);
var ws = io.listen (เซิร์ฟเวอร์);
เพิ่มเหตุการณ์การเชื่อมต่อเซิร์ฟเวอร์ เมื่อการเชื่อมต่อลูกค้าสำเร็จจะมีการประกาศเพื่อบอกผู้ใช้ออนไลน์ทั้งหมดและเมื่อผู้ใช้ส่งข้อความการออกอากาศจะถูกส่งไปยังผู้ใช้รายอื่น
การคัดลอกรหัสมีดังนี้:
ws.on ('การเชื่อมต่อ', ฟังก์ชั่น (ไคลเอนต์) {
console.log ('/033 [96msomeone คือการเชื่อมต่อ/033 [39m/n');
client.on ('เข้าร่วม', ฟังก์ชัน (msg) {
// ตรวจสอบการทำซ้ำ
if (checkNickName (msg)) {
client.emit ('ชื่อเล่น', 'มีชื่อเล่นซ้ำ!');
}อื่น{
client.nickName = msg;
ws.sockets.emit ('ประกาศ', 'ระบบ', msg + 'เข้าร่วมห้องแชท!');
-
-
// ฟังเพื่อส่งข้อความ
client.on ('send.message', function (msg) {
client.broadcast.emit ('send.message', client.nickname, msg);
-
// แจ้งผู้ใช้รายอื่นเมื่อตัดการเชื่อมต่อ
client.on ('disconnect', function () {
if (client.nickname) {
client.broadcast.emit ('send.message', 'ระบบ', client.nickname + 'ออกจากห้องแชท!');
-
-
-
เนื่องจากไคลเอน
การคัดลอกรหัสมีดังนี้:
// ตรวจสอบว่าชื่อเล่นซ้ำหรือไม่
var checkNickName = function (ชื่อ) {
สำหรับ (var k ใน ws.sockets.sockets) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && ws.sockets.sockets [k] .nickname == ชื่อ) {
กลับมาจริง;
-
-
-
กลับเท็จ;
-
เขียนรหัสบริการลูกค้า
เนื่องจากเซิร์ฟเวอร์ใช้เฟรมเวิร์ก WebSokCet ของบุคคลที่สามหน้าส่วนหน้าจำเป็นต้องอ้างถึงรหัสไคลเอ็นต์ Socket.io แยกกัน ไฟล์ต้นฉบับสามารถพบได้จากโมดูล socket.io พา ธ ภายใต้ windows คือ node_modules/socket.io/node_modules/socket.io-client/dist มีเวอร์ชันการพัฒนาและรุ่นบีบอัดที่นี่และการอ้างอิงเริ่มต้นไปยังเวอร์ชันการพัฒนานั้นเพียงพอแล้ว
ส่วนหน้าส่วนใหญ่ประมวลผลการตรวจสอบชื่อเล่นอินพุตการประมวลผลข้อความและรหัสที่สมบูรณ์มีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<title> socket.io chat room ตัวอย่าง </title>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "css/reset.css"/> >>
<link rel = "stylesheet" href = "css/bootstrap.css"/>
<link rel = "stylesheet" href = "css/app.css"/> >>
</head>
<body>
<div>
<div id = "แชท">
<ul id = "chat_conatener">
</ul>
</div>
<div>
<Textarea> </cepenarea>
<button id = "ล้าง"> ล้างหน้าจอ </button>
<button id = "ส่ง"> ส่ง </button>
</div>
</div>
<script type = "text/javascript" src = "js/socket.io.js"> </script>
<script type = "text/javascript">
var ws = io.connect ('http://172.16.2.184:8888');
var sendmsg = function (msg) {
ws.emit ('send.message', msg);
-
var addMessage = function (จาก, msg) {
var li = document.createElement ('li');
li.innerhtml = '<span>' + จาก + '</span>' + ':' + msg;
Document.QuerySelector ('#chat_conatener'). AppendChild (li);
// ตั้งแถบเลื่อนในพื้นที่เนื้อหาไปด้านล่าง
document.querySelector ('#แชท'). scrolltop = document.querySelector ('#แชท'). scrollheight;
// และตั้งค่าโฟกัส
document.querySelector ('textarea'). focus ();
-
var send = function () {
var ele_msg = document.querySelector ('textarea');
var msg = ele_msg.value.replace ('/r/n', '') .Trim ();
console.log (ผงชูรส);
if (! msg) กลับ;
SendMSG (ผงชูรส);
// เพิ่มข้อความในพื้นที่เนื้อหาของคุณเอง
addMessage ('you', msg);
ele_msg.value = '';
-
ws.on ('Connect', function () {
var nickname = window.prompt ('ป้อนชื่อเล่นของคุณ!');
ในขณะที่ (! ชื่อเล่น) {
nickname = window.prompt ('ชื่อเล่นไม่ว่างเปล่าโปรดกลับเข้ามาอีกครั้ง!')
-
ws.emit ('เข้าร่วม', ชื่อเล่น);
-
// มีชื่อเล่นที่ซ้ำกัน
ws.on ('ชื่อเล่น', function () {
Var Nickname = window.prompt ('ชื่อเล่นมีซ้ำโปรดกลับเข้ามาอีกครั้ง!');
ในขณะที่ (! ชื่อเล่น) {
nickname = window.prompt ('ชื่อเล่นไม่ว่างเปล่าโปรดกลับเข้ามาอีกครั้ง!')
-
ws.emit ('เข้าร่วม', ชื่อเล่น);
-
ws.on ('send.message', ฟังก์ชั่น (จาก, msg) {
addMessage (จาก, msg);
-
ws.on ('ประกาศ', ฟังก์ชั่น (จาก, msg) {
addMessage (จาก, msg);
-
Document.QuerySelector ('textarea'). addeventListener ('keypress', ฟังก์ชั่น (เหตุการณ์) {
if (event.hich == 13) {
ส่ง();
-
-
document.QuerySelector ('textarea'). addeventListener ('keydown', ฟังก์ชั่น (เหตุการณ์) {
if (event.hich == 13) {
ส่ง();
-
-
document.QuerySelector ('#send'). addEventListener ('คลิก', function () {
ส่ง();
-
Document.QuerySelector ('#Clear'). AddEventListener ('คลิก', function () {
Document.QuerySelector ('#chat_conatener'). innerhtml = '';
-
</script>
</body>
</html>
ไฟล์การบีบอัดรหัสที่สมบูรณ์มีให้ที่นี่
สรุป
NodeJS เป็นสิ่งที่ดีโดยเฉพาะอย่างยิ่งเมื่อพูดถึงการจัดการการส่งข้อความและการเขียนโปรแกรมเครือข่าย IO แบบอะซิงโครนัสธรรมชาติ