📄 the room widget the dojo toolkit.mht
字号:
class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>joining</SPAN>.<SPAN class=3Dme1>className</SPAN>=3D<SPAN=20
class=3Dst0>''</SPAN>;<BR> <SPAN =
class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>joined</SPAN>.<SPAN class=3Dme1>className</SPAN>=3D<SPAN=20
class=3Dst0>'hidden'</SPAN>;<BR> <SPAN=20
class=3Dco1>//this.username.focus();</SPAN><BR> <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>username</SPAN>.<SPAN=20
class=3Dme1>setAttribute</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"autocomplete"</SPAN>,<SPAN class=3Dst0>"OFF"</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR> <SPAN class=3Dkw1>if</SPAN> <SPAN =
class=3Dbr0>(</SPAN><SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>registeredAs</SPAN><SPAN class=3Dbr0>)</SPAN> <SPAN =
class=3Dbr0>{</SPAN>=20
<SPAN class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>join</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>registeredAs</SPAN><SPAN class=3Dbr0>)</SPAN>; <SPAN =
class=3Dbr0>}</SPAN>=20
<BR> <SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>inherited</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"startup"</SPAN>,arguments<SPAN class=3Dbr0>)</SPAN>; =
<BR><SPAN=20
class=3Dbr0>}</SPAN>,</DIV>
<P>this.inherited() acts like Java's super() operator, but more =
generally. Here=20
it calls dijit._Widget.startup(). This is a good practice to get into =
for the=20
widget extension points.</P>
<H2>Joining and Leaving a Room</H2>
<P>Dojo calls the join method upon clicking the Submit button. Just as =
we=20
outlined on the previous page, it establishes the chat connection with =
the=20
operator (only the client calls this particular method). "_join" does =
the same=20
thing in response to keystrokes. </P>
<P>Note how the dojoAttachPoints come in handy here: they make flipping =
the=20
nodes on and off straightforward.</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">join: <SPAN=20
class=3Dkw2>function</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dkw3>name</SPAN><SPAN class=3Dbr0>)</SPAN><SPAN =
class=3Dbr0>{</SPAN><BR> =20
<SPAN class=3Dkw1>if</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dkw3>name</SPAN> =3D=3D <SPAN class=3Dkw2>null</SPAN> || <SPAN=20
class=3Dkw3>name</SPAN>.<SPAN class=3Dme1>length</SPAN>=3D=3D<SPAN=20
class=3Dnu0>0</SPAN><SPAN class=3Dbr0>)</SPAN><SPAN =
class=3Dbr0>{</SPAN><BR> =20
<SPAN class=3Dkw3>alert</SPAN><SPAN =
class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>'Please enter a username!'</SPAN><SPAN =
class=3Dbr0>)</SPAN>;<BR> =20
<SPAN class=3Dbr0>}</SPAN><SPAN class=3Dkw1>else</SPAN><SPAN=20
class=3Dbr0>{</SPAN><BR> <SPAN =
class=3Dkw1>if</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>isPrivate</SPAN><SPAN class=3Dbr0>)</SPAN><SPAN =
class=3Dbr0>{</SPAN> <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>roomId</SPAN> =3D <SPAN=20
class=3Dkw3>name</SPAN>; <SPAN class=3Dbr0>}</SPAN> <BR> =
=20
<SPAN class=3Dkw1>this</SPAN>._username=3D<SPAN =
class=3Dkw3>name</SPAN>;<BR> =20
<SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>joining</SPAN>.<SPAN class=3Dme1>className</SPAN>=3D<SPAN=20
class=3Dst0>'hidden'</SPAN>;<BR> <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>joined</SPAN>.<SPAN=20
class=3Dme1>className</SPAN>=3D<SPAN class=3Dst0>''</SPAN>;<BR> =
=20
<SPAN class=3Dkw1>this</SPAN>.<SPAN =
class=3Dme1>phrase</SPAN>.<SPAN=20
class=3Dkw3>focus</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR> dojox.<SPAN=20
class=3Dme1>cometd</SPAN>.<SPAN class=3Dme1>subscribe</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dst0>"/chat/demo/"</SPAN> + <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>roomId</SPAN>, <SPAN=20
class=3Dkw1>this</SPAN>, <SPAN class=3Dst0>"_chat"</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR> dojox.<SPAN=20
class=3Dme1>cometd</SPAN>.<SPAN class=3Dme1>publish</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dst0>"/chat/demo/"</SPAN> + <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>roomId</SPAN>, <BR> =
=20
<SPAN class=3Dbr0>{</SPAN> user: <SPAN=20
class=3Dkw1>this</SPAN>._username, join: <SPAN class=3Dkw2>true</SPAN>, =
<BR> =20
chat : <SPAN=20
class=3Dkw1>this</SPAN>._username+<SPAN class=3Dst0>" has joined the=20
room."</SPAN><SPAN class=3Dbr0>}</SPAN><BR> =
<SPAN=20
class=3Dbr0>)</SPAN>;<BR> dojox.<SPAN=20
class=3Dme1>cometd</SPAN>.<SPAN class=3Dme1>publish</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dst0>"/chat/demo"</SPAN>, <SPAN =
class=3Dbr0>{</SPAN>=20
user: <SPAN class=3Dkw1>this</SPAN>._username, joined: <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>roomId</SPAN> <SPAN=20
class=3Dbr0>}</SPAN><SPAN class=3Dbr0>)</SPAN>;<BR> <SPAN=20
class=3Dbr0>}</SPAN><BR><SPAN class=3Dbr0>}</SPAN>,<BR =
class=3Dgeshibr>_join: <SPAN=20
class=3Dkw2>function</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3DcoMULTI>/* Event=20
*/</SPAN>e<SPAN class=3Dbr0>)</SPAN><SPAN class=3Dbr0>{</SPAN><BR> =
=20
<SPAN class=3Dkw2>var</SPAN> key =3D <SPAN class=3Dbr0>(</SPAN>e.<SPAN=20
class=3Dme1>charCode</SPAN> =3D=3D dojo.<SPAN =
class=3Dme1>keys</SPAN>.<SPAN=20
class=3Dme1>SPACE</SPAN> ? dojo.<SPAN class=3Dme1>keys</SPAN>.<SPAN=20
class=3Dme1>SPACE</SPAN> : e.<SPAN class=3Dme1>keyCode</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR> <SPAN class=3Dkw1>if</SPAN> <SPAN =
class=3Dbr0>(</SPAN>key =3D=3D dojo.<SPAN class=3Dme1>keys</SPAN>.<SPAN=20
class=3Dme1>ENTER</SPAN> || e.<SPAN class=3Dme1>type</SPAN>=3D=3D<SPAN=20
class=3Dst0>"click"</SPAN><SPAN class=3Dbr0>)</SPAN><SPAN=20
class=3Dbr0>{</SPAN><BR> <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>join</SPAN><SPAN =
class=3Dbr0>(</SPAN><SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>username</SPAN>.<SPAN=20
class=3Dme1>value</SPAN><SPAN class=3Dbr0>)</SPAN>; <BR> =
<SPAN=20
class=3Dbr0>}</SPAN><BR><SPAN class=3Dbr0>}</SPAN>,</DIV>
<P>Leaving, for the most part, just reverses the join sequence:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">leave: <SPAN=20
class=3Dkw2>function</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dbr0>)</SPAN><SPAN=20
class=3Dbr0>{</SPAN> <BR> dojox.<SPAN =
class=3Dme1>cometd</SPAN>.<SPAN=20
class=3Dme1>unsubscribe</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"/chat/demo/"</SPAN> + <SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>roomId</SPAN>, <SPAN class=3Dkw1>this</SPAN>, <SPAN=20
class=3Dst0>"_chat"</SPAN><SPAN class=3Dbr0>)</SPAN>;<BR> =
dojox.<SPAN=20
class=3Dme1>cometd</SPAN>.<SPAN class=3Dme1>publish</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dst0>"/chat/demo/"</SPAN> + <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>roomId</SPAN>, <BR> =
=20
<SPAN class=3Dbr0>{</SPAN> user: <SPAN =
class=3Dkw1>this</SPAN>._username,=20
leave: <SPAN class=3Dkw2>true</SPAN>, <BR> =
chat :=20
<SPAN class=3Dkw1>this</SPAN>._username+<SPAN class=3Dst0>" has left the =
chat."</SPAN><SPAN class=3Dbr0>}</SPAN><BR> <SPAN=20
class=3Dbr0>)</SPAN>;<BR class=3Dgeshibr> <SPAN =
class=3Dco1>// switch the=20
input form back to login mode</SPAN><BR> <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>joining</SPAN>.<SPAN=20
class=3Dme1>className</SPAN>=3D<SPAN class=3Dst0>''</SPAN>;<BR> =
<SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>joined</SPAN>.<SPAN=20
class=3Dme1>className</SPAN>=3D<SPAN =
class=3Dst0>'hidden'</SPAN>;<BR> =20
<SPAN class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>username</SPAN>.<SPAN=20
class=3Dkw3>focus</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR> <SPAN =
class=3Dkw1>this</SPAN>._username=3D<SPAN=20
class=3Dkw2>null</SPAN>;<BR><SPAN class=3Dbr0>}</SPAN>,</DIV>
<H2>Sending and Receiving a Message</H2>
<P>Finally, the meaty part of the Room widget. Sending is a fairly =
simple matter=20
over our protocol:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">chat: <SPAN=20
class=3Dkw2>function</SPAN><SPAN class=3Dbr0>(</SPAN>text<SPAN=20
class=3Dbr0>)</SPAN><SPAN class=3Dbr0>{</SPAN><BR> <SPAN =
class=3Dco1>//=20
summary: publish a text message to the room</SPAN><BR> =
<SPAN=20
class=3Dkw1>if</SPAN><SPAN class=3Dbr0>(</SPAN>text !=3D <SPAN =
class=3Dkw2>null</SPAN>=20
&& text.<SPAN class=3Dme1>length</SPAN>><SPAN =
class=3Dnu0>0</SPAN><SPAN=20
class=3Dbr0>)</SPAN><SPAN class=3Dbr0>{</SPAN><BR> =
<SPAN=20
class=3Dco1>// lame attempt to prevent markup</SPAN><BR> =
=20
text=3Dtext.<SPAN class=3Dme1>replace</SPAN><SPAN =
class=3Dbr0>(</SPAN><SPAN=20
class=3Dre0>/</g</SPAN>,<SPAN class=3Dst0>'<'</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR> text=3Dtext.<SPAN=20
class=3Dme1>replace</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dre0>/>/g</SPAN>,<SPAN class=3Dst0>'>'</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR> dojox.<SPAN=20
class=3Dme1>cometd</SPAN>.<SPAN class=3Dme1>publish</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dst0>"/chat/demo/"</SPAN> + <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>roomId</SPAN>, <SPAN =
class=3Dbr0>{</SPAN>=20
user: <SPAN class=3Dkw1>this</SPAN>._username, chat: text<SPAN=20
class=3Dbr0>}</SPAN><SPAN class=3Dbr0>)</SPAN>;<BR> <SPAN=20
class=3Dbr0>}</SPAN><BR><SPAN class=3Dbr0>}</SPAN>,</DIV><BR>
<P>Receive is handled by the topic subscriptions, which we connected in =
join().=20
The event mediator sends receive() a message, which becomes the =
parameter=20
"message" here. Then message.data contains the object that the publisher =
sent=20
over.</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">_chat: <SPAN=20
class=3Dkw2>function</SPAN><SPAN class=3Dbr0>(</SPAN>message<SPAN=20
class=3Dbr0>)</SPAN><SPAN class=3Dbr0>{</SPAN><BR> <SPAN =
class=3Dco1>//=20
summary: process an incoming message</SPAN><BR> <SPAN=20
class=3Dkw1>if</SPAN> <SPAN class=3Dbr0>(</SPAN>!message.<SPAN=20
class=3Dme1>data</SPAN><SPAN class=3Dbr0>)</SPAN><SPAN =
class=3Dbr0>{</SPAN><BR> =20
console.<SPAN class=3Dme1>warn</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dst0>"bad message format =
"</SPAN>+message<SPAN=20
class=3Dbr0>)</SPAN>;<BR> <SPAN=20
class=3Dkw1>return</SPAN>;<BR> <SPAN =
class=3Dbr0>}</SPAN><BR> =20
<SPAN class=3Dkw2>var</SPAN> from=3Dmessage.<SPAN =
class=3Dme1>data</SPAN>.<SPAN=20
class=3Dme1>user</SPAN>;<BR> <SPAN class=3Dkw2>var</SPAN>=20
special=3Dmessage.<SPAN class=3Dme1>data</SPAN>.<SPAN =
class=3Dme1>join</SPAN> ||=20
message.<SPAN class=3Dme1>data</SPAN>.<SPAN =
class=3Dme1>leave</SPAN>;<BR> =20
<SPAN class=3Dkw2>var</SPAN> text=3Dmessage.<SPAN =
class=3Dme1>data</SPAN>.<SPAN=20
class=3Dme1>chat</SPAN>;<BR> <SPAN =
class=3Dkw1>if</SPAN><SPAN=20
class=3Dbr0>(</SPAN>text!=3D<SPAN class=3Dkw2>null</SPAN><SPAN =
class=3Dbr0>)</SPAN><SPAN=20
class=3Dbr0>{</SPAN><BR> <SPAN =
class=3Dkw1>if</SPAN><SPAN=20
class=3Dbr0>(</SPAN>!special && from =3D=3D <SPAN =
class=3Dkw1>this</SPAN>._last=20
<SPAN class=3Dbr0>)</SPAN><SPAN class=3Dbr0>{</SPAN> from=3D<SPAN=20
class=3Dst0>"..."</SPAN>;<BR> <SPAN=20
class=3Dbr0>}</SPAN><SPAN class=3Dkw1>else</SPAN><SPAN =
class=3Dbr0>{</SPAN><BR> =20
<SPAN=20
class=3Dkw1>this</SPAN>._last=3Dfrom;<BR> =
=20
from+=3D<SPAN class=3Dst0>":"</SPAN>;<BR> =
<SPAN=20
class=3Dbr0>}</SPAN><BR class=3Dgeshibr> =
<SPAN=20
class=3Dkw1>if</SPAN><SPAN class=3Dbr0>(</SPAN>special<SPAN =
class=3Dbr0>)</SPAN><SPAN=20
class=3Dbr0>{</SPAN><BR> <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>chatNode</SPAN>.<SPAN=20
class=3Dme1>innerHTML</SPAN> +=3D <BR> =
=20
<SPAN class=3Dst0>"<span class=3D<SPAN=20
class=3Des0>\"</SPAN>alert<SPAN class=3Des0>\"</SPAN>><span =
class=3D<SPAN=20
class=3Des0>\"</SPAN>from<SPAN =
class=3Des0>\"</SPAN>>"</SPAN>+from+<BR> =20
<SPAN=20
class=3Dst0>" </span><span class=3D<SPAN =
class=3Des0>\"</SPAN>text<SPAN=20
class=3Des0>\"</SPAN>>"</SPAN>+text+<SPAN=20
class=3Dst0>"</span></span>"</SPAN>; <BR> =
=20
<SPAN class=3Dkw1>this</SPAN>._last=3D<SPAN=20
class=3Dst0>""</SPAN>;<BR> <SPAN=20
class=3Dbr0>}</SPAN><SPAN class=3Dkw1>else</SPAN><SPAN =
class=3Dbr0>{</SPAN><BR> =20
<SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>chatNode</SPAN>.<SPAN class=3Dme1>innerHTML</SPAN> +=3D =
<BR> =20
<SPAN class=3Dst0>"<span =
class=3D<SPAN=20
class=3Des0>\"</SPAN>from<SPAN =
class=3Des0>\"</SPAN>>"</SPAN>+from+<SPAN=20
class=3Dst0>" </span><span class=3D<SPAN =
class=3Des0>\"</SPAN>text<SPAN=20
class=3Des0>\"</SPAN>>"</SPAN>+text+<BR> =
=20
<SPAN class=3Dst0>"</span>"</SPAN>;<BR> =
=20
<SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>chatNode</SPAN>.<SPAN class=3Dme1>scrollTop</SPAN> =3D <SPAN =
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>chatNode</SPAN>.<SPAN=20
class=3Dme1>scrollHeight</SPAN> - <SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>chatNode</SPAN>.<SPAN class=3Dme1>clientHeight</SPAN>; =
=20
<BR> <SPAN class=3Dbr0>}</SPAN><BR> =
<SPAN=20
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -