HTML5-WEBSOCKET Implementing Chat Room Example

The method of implementing the chat room in the traditional webpage is to achieve the relevant chat information by requesting the server to obtain the relevant chat information every other time. Since the WebSocket allows the connection to keep the connection for data interaction after connecting the server, the server can actively send the corresponding data to the client. For HTML5 processing, you only need to process the receiving data in the Receive event of the WebSocket after the connection is completed. Let's experience the function that the server can actively send to the client by implementing a chat room.

A simple chat room has the following functions:

Register to deal with several things, namely after the registration is completed, to obtain all the user list of the current server, and the service will send the currently registered users to other online users.

The server sends the currently received message to other users online

The server will notify other users who disconnected the disconnected users

The function preview of the chat room is as follows:

The code on the server only needs to define several methods for several functions, namely registration, obtaining other users and sending information. The specific code is as follows:

 /// <summary> /// CopyRight © Henryfan 2012 /// email: [email protected] /// HomePage: http://www.ikende.com /// createTime: 2012/12/7 21:45 21:45 : 25 /// </Summary> Class Handler {Public Long Register (String name) {tcpChannel Channel = METHODCONTEXT.CURRENT.Channel; console.writeline ({0} register Na me: {1}, Channel.endpoint, name); Channel.Name = name; jsonmessage msg = new jsonmessage (); user user = new user (); user.name = name; user.id = channel.clientid; user.ip = Chan nel.endpoint.tostring (); Channel. Tag = user; msg.type = register; msg.data = user; foreach (tcpchaannel it in channel.server.getonlines ()) {ifm! = Channel) Item.send (msg);} turn channel.clientid; } Public ilist <user> list () {TCPChannel Channel = MethodContext.CURRENT.Channel; IList <user> Result = new list <user> (); anneel.server.getonLines ()) {if (item ! = Channel) Result.add (user) item.tag);} Return Result;} public void say (string content) {TCPChannel Channel = METHODCONTEXT.CURRENT.CHANEL; JsonMessage msg = new jsonmessage (); saytext st = new Saytext (); st.Name = channel.name; st.id = channel.clientid; str = datetime.now; str.Content = content; str = channel.endpoint.tostring (); g.type = say; msg.data = st; foreach (tcpchaannel item in channel.servernelines ()) {item.send (msg);}}}

Only the above simple code is required to complete the function of the chat room server. For the user withdrawing, you can use the connection to release events to process the specific code:

 ProteCted Override Void Ovedisposed (Object SENDER, CHANNELDISPOSDEVENTARGS E) {Base.ondisposed (Sender, E); el.ndpoint); jsonMessage msg = new jsonmessage (); user user = new user (); user.Name = e.Channel.Name; user.ID = e.Channel.ClientID; user.IP = e.Channel.EndPoint.ToString(); msg.type = unregister; msg.data = (User) e.Channel.tag; Foreach (TCPChannel item in this.server.getonLines ()) {if (Item! = E.Channel) item.send (msg);}}}}

The service side code of the chat is completed.

The first thing to do for the html5 code is to connect to the server. The related JavaScript code is as follows:

 Function connect () {channel = new tcpchaannel (); channel.connect = function (evt) {callregister.parameters.name = $ ('#nikename'); Val (); .Send (Callregister, Function (Result) { if (result.status == null || result.status == Undefined) {$ ('#dlgConnect'). Dialog ('close'); registerid = result.data; list ();}); }; Channel .Disposed = Function (EVT) {$ ('#DLGConnect'). Dialog ('Open'); Channel.error = Function (EVT) {ALERT (EVT);}; Tion (result) { if (result.type == register) {var Item = getuser (result.data); $ (item) .appndto ($ ('#lstonlines'));} Else if (result.type == ') { $ ('#user_' + result.data.id) .Remove ();} else if (result.type == 'say') {addsayitem (result.data);} Else {}} (( '#host'). Val ());}

Different messages are handled through the number of recovery pools of the Receive. If you receive the registration information of other users, add the user information to the list; if the exit information of other users receives Add to the message display box to the message display box. The help of JQuery's help have become very simple.

User registration call process:

 Var callregister = {url: 'handler.register', parameters: {name: ''}}; function register () {$ ('#frmregister'). function () {var isvalid = $ (this) .form ('value'); if (ISVALID) {connect ();} Return false;});}

Get online user list process:

 var callist = {url: 'handler.list', parameters: {}}; function list () {channel.send (calllist, function (result) {$ ('#lstonlines'). html ('' '); for ( var I = 0; I <result.data.Length; i ++) {var Item = getuser (result.data [i]); $ (item) .appndto ($ ('#lstonlies'));}});}

Send message process:

 var callsay = {url: 'handler.say', parameters: {content:} function say () {callsay.parameters.Content = Meditor.html (); Meditor.html ('') ; Channel.send (Callsay) ; $ ('#Content1') [0] .focus ();}

After the code is encapsulated, the processing of WebSocket becomes very simple. If you are interested, you can expand a more functional chat room on this code, such as chat room grouping, sending information picture sharing, etc.

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.