قبل تقديم النص الرئيسي ، اسمحوا لي أن أقدم خلفية ومبادئ WebSocket لك:
خلفية
يمكن تحقيق اتصال في اتجاه واحد فقط من خلال HTTP في المتصفح. يمكن أن يحاكي المذنب الاتصالات ثنائية الاتجاه إلى حد ما ، لكنه منخفض في الكفاءة ويتطلب دعمًا جيدًا من الخادم ؛ يمكن للمقبس و XMLSocket في الفلاش تحقيق التواصل الحقيقي في اتجاهين ، ويمكن استخدام هاتين وظيفتين في JavaScript من خلال جسر Ajax Flex. قد يكون من المتوقع أنه إذا تم تنفيذ WebSocket في المتصفح ، فسيحل محل التقنيتين أعلاه واستخدامه على نطاق واسع. في مواجهة هذا الموقف ، يحدد HTML5 بروتوكول WebSocket ، والذي يمكنه توفير موارد الخادم وعرض النطاق الترددي بشكل أفضل وتحقيق التواصل في الوقت الفعلي.
يتم تنفيذ بروتوكول WebSocket أيضًا في Javaee7.
مبدأ
بروتوكول WebSocket.
في الوقت الحاضر ، من أجل تحقيق التواصل الفوري ، تستخدم العديد من مواقع الويب الاقتراع. يمكن للاقتراع إرسال طلب HTTP إلى الخادم في فترة زمنية محددة (مثل كل ثانية واحدة) ، ويقوم الخادم بإرجاع أحدث البيانات إلى متصفح العميل. هذا نمط طلب HTTP التقليدي يجلب عيوب واضحة. يحتاج المتصفح إلى تقديم طلبات إلى الخادم باستمرار. ومع ذلك ، فإن رأس طلب HTTP طويل جدًا ، وقد تكون البيانات المفيدة الموجودة فيه مجرد قيمة صغيرة ، والتي ستحتل الكثير من النطاق الترددي.
تأثير التكنولوجيا الأحدث لإجراء الاقتراع هو أن المذنب يستخدم AJAX. ومع ذلك ، على الرغم من أن هذه التكنولوجيا يمكن أن تحقق اتصالات كاملة ، إلا أنها لا تزال تتطلب طلبًا.
في واجهة برمجة تطبيقات WebSocket ، يحتاج المتصفح والخادم إلى مصافحة فقط ، ثم يتم تشكيل قناة سريعة بين المتصفح والخادم. يمكن نقل البيانات مباشرة بين الاثنين. في بروتوكول WebSocket هذا ، لدينا فوائد رئيسية لتنفيذ الخدمة الفورية:
1. رأس
الرأس الذي يتواصل مع بعضهما البعض صغير جدًا - ربما فقط 2 بايت
2. دفع الخادم
عند الضغط على الخادم ، لم يعد الخادم يتلقى بشكل سلبي طلب المتصفح قبل إرجاع البيانات ، ولكنه يدفعه بنشاط إلى المتصفح عند توفر بيانات جديدة.
1. مقدمة المشروع
WebSocket هو بروتوكول جديد في HTML5. ينفذ الاتصالات المزدوجة الكاملة بين المتصفح والخادم. هنا ، سيتم استخدام WebSocket لتطوير غرف الدردشة على الويب. سيستخدم الإطار الأمامي Amazeui و Java في الخلفية و Umeditor في المحرر.
2. إشراك نقاط المعرفة
الواجهة الأمامية على الويب (HTML+CSS+JS) و Java
3. بيئة البرمجيات Tomcat 7 JDK 7 Eclipse Javaee Modern Browser
4. تأثير لقطة الشاشة
تأثير 1
تأثير 2
5. مشروع القتال العملي
1. إنشاء مشروع جديد
Open Eclipse Javaee ، قم بإنشاء مشروع ديناميكي جديد يسمى الدردشة ، ثم استيراد الحزم المطلوبة لمعالجة سلاسل تنسيق JSON ، Place Commons-Beanutils-1.8.0.Jar ، Commons-Collections-3.2.1.Jar ، Commons-Lang-2.5 يتم وضع الحزم الأخرى في دليل WebContent/Web-INF/LIB ، ونشر المشروع أخيرًا على خادم Tomcat. في هذه المرحلة ، تم الانتهاء من المشروع الفارغ.
2. اكتب الصفحة الأمامية
قم بإنشاء صفحة جديدة تسمى index.jsp في دليل WebContent. يتم استخدام إطار Amazeui هنا. إنه إطار أمامي تكيفي عبر الشاشة. يستخدم مربع إدخال الرسائل Umeditor ، وهو محرر نص غني عبر الإنترنت يمكنه جعل محتوى الرسائل ملونًا.
أولاً ، قم بتنزيل الحزمة المضغوطة من موقع Amazeui الرسمي ، ثم قم بفك ضغط مجلد الأصول ونسخ دليل WebContent ، حتى نتمكن من استخدام Amazeui.
ثم قم بتنزيل الإصدار المصغر من حزمة ضغط إصدار JSP من موقع Uediter الرسمي ، وقم بفك الدليل بأكمله في دليل WebContent ، وبعد ذلك يمكنك كتابة رمز الواجهة الأمامية ، والرمز كما يلي (يمكنك كتابته وفقًا لتفضيلاتك):
<٪@ page language = "java" contentType = "text/html ؛ charset = utf-8" pageencoding = "utf-8" ٪> <! doctype html> <html lang = "zh"> <head> <head> name = "viewport" content = "width = width device ، sciale = 1 ، maximum-scale = 1 ، order-scalable = no"> <title> shiyanlou chat </title> <!-قم بتعيين محرك عرض 360-> <meta name = "rander" content =!-!-no baidu siteapp-> content = "no-siteapp"/> <link rel = "icon icon icon" href = "arcets/i/favicon.ico"> <link rel = "stylesheet" href = "umeditor/tempes/default/css/umeditor.css" rel = "stylesheet"> <style> .title {text-align: center ؛}. فائض y: التمرير ؛ الحدود: 1px Solid Silver ؛} </style> </head> <body> <!-start title-> <viv> <viv> <viv> <viv> <h1> shiyanlou chat </h1> </viv> </viv> </viv> </div> </viv> </div> </div> </div> </div> </div> </div> </div> </div> </div> بدء محتوى الدردشة-> <!-بدء إدخال الرسائل-> <viv> <firm> <Porm> <div> <script type = "text/plain" id = "myeditor"> </script> </viv> </form> </viv> </viv> <viv> <viv> <viv> <viv> <viv> <div id = "message-input-nickname" type = "text" placeholder = "الرجاء إدخال لقب"/> </div> </div> <viv> <script src = "alsesets/js/jquery.min.js"> </script> <!-<!-[if lte ie 8]> <script src = "http://libs.baidu.com/jquery/1.11.1/jquery.min.js"> </script> <!-<!-<!-[if lte ie 8]> <script src = "http://libs.baidu.com/jquery/1.1.1/1 <!-umeditor js-> <script charset = "utf-8" src = "umeditor/umeditor.config.js"> </script> <script charset = "utf-8" src = "umeditor/umeditor.min.js src = "umeditor/lang/zh-cn/zh-cn.js"> </script> <script> $ (function () {// تهيئة مربع إدخال الرسائل var um = um.geteditor ('myeditor') ؛ // اجعل مربع اللقب يحصل على Focus $ ('#labeame') [0] .focus () ؛ }) ؛ </script> </body> </html>بعد الكتابة ، ابدأ خادم Tomcat ، ثم قم بزيارة http: // localhost: 8080/chat/index.jsp وسترى الواجهة التالية.
3. اكتب رمز الخلفية
قم بإنشاء حزمة جديدة من com.shiyanlou.chat ، قم بإنشاء فصل يسمى chatserver في الحزمة. تم توحيد واجهة برمجة تطبيقات WebSocket منذ Javaee 7. لذلك ، بغض النظر عن الخادم ، فإن الكود المكتوب في Java هو نفسه ، والرمز كما يلي:
package com.shiyanlou javax.websocket.server.serverendpoint ؛ استيراد net.sf.json.jsonoBject ؛/** * فئة خادم الدردشة * @author shiyanlou * */ @serverendpoint ("/websocket") الفئة العامة chatserver onopen public void open (جلسة الجلسة) {// إضافة عملية التهيئة} / *** قبول رسالة العميل وأرسل الرسالة إلى جميع الجلسات المتصلة* message message من العميل* @جلسة Param جلسة العميل* / onMessage public void getMessage (jsonobjouse) // أضف تاريخ إرسال في الرسالة jsonobject.put ("Date" ، date_format.format (New Date ())) ؛ // أرسل الرسالة إلى جميع الجلسات المتصلة لـ (Session OpenSession: Session.GetOpenSessions ()) {// إضافة أعلام ما إذا كانت هذه الرسالة هي الجلسة الحالية نفسها jsonobject.put ("isself" ، opensession.equals (الجلسة)) ؛ // إرسال رسالة json-formatted opensession.getAsyncremote (). sendText (jsonobject.toString ()) ؛ }} onclose public void close () {// أضف عملية عند إغلاق الجلسة} @Onerror public void error (throwable t) {// أضف عملية للتعامل مع الخطأ}}4. التفاعل الأمامي والخلف
بعد كتابة الخلفية ، يحتاج مكتب الاستقبال إلى استخدام WebSocket للاتصال بالخلفية. تحتاج إلى إنشاء كائن WebSocket جديد ، وبعد ذلك يمكنك التفاعل مع الخادم ، وإرسال رسائل من المتصفح إلى الخادم ، وفي الوقت نفسه تحقق من ما إذا كان محتوى مربع الإدخال فارغًا ، ثم قبول الرسائل المرسلة من الخادم ، وإضافتها ديناميكيًا إلى مربع محتوى الدردشة ،
var um = um.geteditor ('myeditor') ؛ $ ('#labeame') [0] .focus () ؛ // إنشاء كائن WebSocket جديد ، وآخر/WebSocket يتوافق مع side-serverendpoint (/"/websocket") var socket = جديد WebSocket ('ws: // $ {pagecontext.request.getServerName ()}: $ {pagecontext.request.getserverport ()} $ {pagecontext.request.contextpath}/websocket') ؛ // البيانات التي يتم إرسالها بواسطة socket.onmessage = الدالة (الحدث) {addMessage (event.data) ؛ } ؛ // Action $ ('#send'). on ('click' ، function () {var laberm = $ ('#labeame'). val () ؛ if (! um.hascontents ()) {// تحديد ما إذا كان مربع إدخال الرسائل فارغًا // مربع إدخال الرسائل يحصل على التركيز um.focus () setTimeout ("$ ('. edui-container'). removeclass ('am-animation-shake')" ، 1000) ؛ $ ('#-input-nickname'). addClass ('am-animation-shake') ؛ // مربع إدخال الرسائل الواضح UM.SetContent ('') ؛ // إضافة رسالة إلى وظيفة محتوى الدردشة AddMessage (رسالة) {message = json.parse (message) ؛ var messageItem = '<li>' + '<a href = "javaScript: void (0)"> <img src = "arcets/' + (message.isself؟ message.nickname + '</a> <time>' + message.date + '</time> </viv> </header>' + '<viv>' + message.content + '</viv> </viv> </li>' ؛ $ (messageItem) .Appendto ('#leber') ؛ // قم بتمرير شريط التمرير إلى القاع $ (". }في هذه المرحلة ، تم الانتهاء من غرفة دردشة الويب البسيطة. يمكنك فتح العديد من النوافذ أو دعوة الأصدقاء للاختبار معًا على الشبكة المحلية.
6. ملخص
تستخدم فئة المشروع WebSocket لتنفيذ غرفة دردشة ويب بسيطة. في الواقع ، لا يمكن تطبيق WebSocket فقط على المتصفح ، ولكن أيضًا على عملاء سطح المكتب.
7. أسئلة التفكير
فئة المشروع هذه هي مجرد تطبيق بسيط لغرفة الدردشة. في الواقع ، هناك العديد من الوظائف التي يمكن إضافتها ، مثل وظيفة تحميل الصورة الرمزية ، ووظيفة الدردشة الفردية ، وما إلى ذلك ، دعنا نحسن غرفة الدردشة معًا.
هل تريد تجربته على الفور إذا رأيت هذا؟ انقر هنا --- تزويدك ببيئة تجميع مجانية عبر الإنترنت بحيث لم تعد مضطرًا للقلق بشأن بناء بيئة
ما سبق هو المعرفة ذات الصلة حول استخدام Java و WebSocket لتنفيذ رمز مثال غرفة الدردشة على الويب المقدمة لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!