تنفيذ الاتصال عبر WebSocket باستخدام HTML5 على Tomcat 7.0 وإنشاء محادثة حية بسيطة

1 - ما هو WebSocket؟

WebSocket هو اتصال طبيعي ثنائي الاتجاه، ثنائي الاتجاه، باستخدام كومة واحدة. باستخدام WebSocket، يتحول طلب HTTP الخاص بك إلى طلب واحد لفتح اتصال WebSocket (WebSocket أو WebSocket عبر TLS (Transport Layer Security، أمان طبقة النقل، كان يُدعى أيضًا "SSL"))، ويتم تكرار الاتصال نفسه من العميل إلى الخادم ومن الخادم إلى العميل. يقلل WebSocket من التأخير لأنه بمجرد إنشاء اتصال WebSocket، يمكن للخادم إرسال الرسائل عند توفرها. على سبيل المثال، يختلف عن الاستعلامات التي تُرسل باستمرار، حيث يتم إرسال طلب واحد فقط. لا يتطلب الخادم انتظار طلب من العميل. بشكل مشابه، يمكن للعميل إرسال رسائل إلى الخادم في أي وقت. بالمقارنة مع الاستعلامات التي تُرسل بشكل دوري، يقلل الطلب الواحد من التأخير بشكل كبير.

2 - API WebSocket

يسمح API WebSocket بإنشاء اتصال ثنائي الاتجاه كامل التفاعل بين تطبيق العميل وبين عملية الخادم. يحدد واجهة WebSocket الطرق المتاحة للعميل والطريقة التي يتم من خلالها التفاعل مع الشبكة.

3 - بناء obj WebSocket

لإقامة اتصال WebSocket مع الخادم، يتم استخدام واجهة WebSocket، عن طريق تشكيل obj WebSocket يشير إلى URL يمثل النقطة التي يتم الاتصال بها. يحدد بروتوكول WebSocket اثنين من خطط URL (URL scheme) — ws وwss، ويتم استخدامها للتواصل غير المشفرة والمشفرة بين العميل والخادم.

مثال: var ws = new WebSocket("ws://www.websocket.org");

4 - أحداث WebSocket

WebSocket API هو نظام تفاعلي مكتوب بالكامل على أساس الأحداث. يتحقق برنامج التطبيق من أحداث obj WebSocket لمعالجة بيانات الدخول وتغييرات حالة الاتصال. أيضًا، هواتف WebSocket قائمة على الأحداث.

يقوم obj WebSocket بتعديل أربعة أحداث مختلفة:

أ - أحداث open:

بمجرد أن يستجيب الخادم لطلب الاتصال بـ WebSocket، يتم إطلاق أحداث open ويتم إنشاء اتصال. يتم تسمية الدالة المرتبطة باحداث open بـ onopen

مثال:

ws.onopen = function(e) {
console.log("Connection open...");
};

B. أحداث messages

تُجري أحداث message عند استلام رسالة. هيكل الدالة المُستدعى لمكالمة أحداث message هو onmessage.

مثال:

ws.onmessage = function(e) {
if(typeof e.data === "string"){
console.log("String message received", e, e.data);
} else {
console.log("Message received", e, e.data);
}
};

C. أحداث error

تُجري أحداث error عند مواجهة عطل غير متوقع. هيكل الدالة المُستدعى لمكالمة أحداث error هو onerror.
مثال:

ws.onerror = function(e){
console.log('خطأ websocked');
handerError();
}

D. أحداث close

تُجري أحداث close عند إغلاق اتصال WebSocket. هيكل الدالة المُستدعى لمكالمة أحداث close هو onclose.

مثال:

ws.onclose = function(e) {
console.log("Connection closed", e);
};

5. طرق WebSocket

مobjet WebSocket يحتوي على طريقتين: send() و close().

A. طريقة send()

بعد إنشاء اتصال ثنائي الاتجاه كامل بين العميل والخادم باستخدام WebSocket، يمكنك دعوة طريقة send() عند فتح الاتصال. يمكنك استخدام طريقة send() لإرسال رسائل من العميل إلى الخادم. بعد إرسال رسالة واحدة أو أكثر، يمكنك الحفاظ على الاتصال مفتوحًا أو دعوة طريقة close() لإنهاء الاتصال.

مثال:

ws.send("مرحبًا WebSocket!");

B. طريقة close ()

باستخدام طريقة close()، يمكنك إغلاق اتصال WebSocket أو إنهاء محاولة الاتصال. إذا كان الاتصال مغلقاً، فإن هذه الطريقة لا تقوم بأي شيء. لا يمكنك إرسال أي بيانات إلى WebSocket الذي تم إغلاقه بعد دعوة close(). يمكنك إرسال اثنين من المعلمات الاختيارية إلى طريقة close(): code (رقمي) و reason (نصية). يمكن بث هذه المعلمات إلى الخادم لتقديم معلومات حول سبب إغلاق العميل للاتصال.

ملاحظة: إن هذا هو شرح بسيط لـ WebSocket، وسنستعرض فيما بعد كيفية استخدام WebSocket من خلال مثال بسيط لصفحة التحدث المباشر

A: أولاً، قم بإنشاء مشروع جديد أسميه chatroom، ثم قم بإنشاء حزمة ثم قم بإنشاء فئة لتنفيذ الاتصال من الجانب الخادم أسميتها ChatWebSocketServlet.Java;

الشكل التالي يوضح كيفية بناء المشروع:

　

B: كتابة كلاس التنفيذية الخاصة بالخادم ChatWebSocketServlet.java، والكود التالي هو:

package com.yc.chat.Servlet;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;
@WebServlet("/chat")
public class ChatWebSocketServlet extends WebSocketServlet {
private final Map<Integer, WsOutbound> map = new HashMap<Integer, WsOutbound>();
private static final long serialVersionUID = -1058445282919079067L;
@Override
protected StreamInbound createWebSocketInbound(String arg0, HttpServletRequest request) {
// StreamInbound: كائن WebSocket القائم على البيانات (بأداء داخلي)، يجب على التطبيق توسيع هذا الكائن وتنفيذ طريقيه الم抽象ية onBinaryData وonTextData.
return new ChatMessageInbound();
}
class ChatMessageInbound extends MessageInbound {
// MessageInbound: كائن WebSocket القائم على الرسائل (بأداء داخلي)، يجب على التطبيق توسيع هذا الكائن وتنفيذ طريقيه الم抽象ية onBinaryMessage و onTextMessage.
@Override
protected void علىفتح(WsOutbound outbound) {
map.put(outbound.hashCode(), outbound);
super علىفتح outbound);
}
@Override
protected void علىإغلاق(int status) {
map.remove(getWsOutbound().hashCode());
super علىإغلاق��态();
}
@Override
protected void علىرسالةنصية(ByteBuffer buffer) throws IOException {
}
@Override
protected void علىرسالةنصية(CharBuffer buffer) throws IOException {
String رسالة = buffer.toString();
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
رسالة = " <font color=green>مستخدم مجهول " + sdf.format(date) + "</font><br/> " + رسالة;
تبليغ(رسالة);
}
private void تبليغ(String رسالة) {
Set<Integer> set = map.keySet();
for (Integer integer : set) {
WsOutbound outbound = map.get(integer);
CharBuffer buffer = CharBuffer.wrap(msg);
try {
outbound.writeTextMessage(buffer);
outbound.flush();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}

C: تنفيذ صفحة الواجهة الأمامية index.jsp (لا يتم عرضها بشكل جيد لتعزيز الوظيفة، بسيطة نسبيًا) رمزها المحدد كالتالي:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>غرفة دردشة WebSocket</title>
<style type="text/css">
#chat {
text-align: left;
width: 600px;
height: 500px;
width: 600px;
}
#up {
text-align: left;
width: 100%;
height: 400px;
border: 1px solid green;
OVERFLOW-Y: auto;
}
#down {
text-align: left;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<h2 align="center">مكتبة دردشة مبنية على HTML5</h2>
<div align="center" style="width: 100%; height: 700px;">
<div id="chat">
<div id="up"></div>
<div id="down">
<textarea type="text" style="width: 602px; height: 100%;" id="send"></textarea>
</div>
</div>
<input type="button" value="اتصال" onclick="chat(this);"> <input
type="button" value="إرسال" onclick="send(this);" disabled="disabled"
id="send_btn" title="[#1#]">
</div>
</body>
<script type="text/javascript">
var socket;
var receive_text = document.getElementById("up");
var send_text = document.getElementById("send");
function addText(msg) {
receive_text.innerHTML += "<br/>" + msg;
receive_text.scrollTop = receive_text.scrollHeight;
}
var chat = function(obj) {
obj.disabled = "disabled";
socket = new WebSocket('ws://localhost:8080/chatroom/chat');
receive_text.innerHTML += "<font color=green>جارٍ الاتصال بالخادم……</font>";
//فتح Socket 
socket.onopen = function(event) {
addText("<font color=green>الرابط ناجح!</font>");
document.getElementById("send_btn").disabled = false;
send_text.focus();
document.onkeydown = function(event) {
if (event.keyCode == 13 && event.ctrlKey) {
send();
}
}
};
socket.onmessage = function(event) {
addText(event.data);
};
socket.onclose = function(event) {
addText("<font color=red>الرابط منقطع!</font>");
obj.disabled = "";
};
if (socket == null) {}}
addText("<font color=red>اتصال ناموفق!</font>");
}
};
var send = function(obj) {
if (send_text.value == "") {
return;
}
socket.send(send_text.value);
send_text.value = "";
send_text.focus();
}
</script>
</html>

این صفحه چت زنده ساده آماده است، سپس پروژه را به سرور Tomcat 7.0 پیاده‌سازی کنید و سرور را باز کنید تا بتوانید چت کنید

نمایش نتایج:

1. آدرس سرور را در خط آدرس وارد کنید:

http://127.0.0.1:8080/chatroom/index.jsp

نتیجه کلیک بر روی اتصال به سرور به شرح زیر است:

　

2. در دو مرورگر متفاوت باز کنید و به یکدیگر پیام ارسال کنید (من اینجا از گوگل و فایرفاکس استفاده می‌کنم) نتیجه به شرح زیر است:

آنچه که در بالا ذکر شده است، توسط نویسنده به شما معرفی شده است که HTML5 بر اساس Tomcat 7.0 اتصال WebSocket را انجام داده و یک چت زنده ساده را پیاده‌سازی کرده است، امیدوارم به شما کمک کند، اگر سوالی دارید، لطفاً پیام بگذارید، نویسنده به شما پاسخ خواهد داد. همچنین از حمایت شما از وب‌سایت آموزشی ناگا می‌خواهم تشکر کنم!

اظهار: محتوای این مقاله از اینترنت است و مالکیت آن به عهده صاحب‌کار است، محتوای توسط کاربران اینترنت به صورت خودجوش و خودکار آپلود شده است، این وب‌سایت مالکیت ندارد، دستی ویرایش نشده است و مسئولیت قانونی مربوطه را نمی‌پذیرد. اگر محتوای مشمول حقوق مالکیت فکری را پیدا کردید، خوشحال می‌شوم که ایمیل به آدرس notice#oldtoolbag.com (در هنگام ارسال ایمیل، لطفاً # را به @ تبدیل کنید) ارسال کنید تا گزارش دهید و مدارک مربوطه را ارائه دهید، در صورت تأیید، این وب‌سایت محتوای مشمول حقوق مالکیت فکری را فوراً حذف خواهد کرد.