HTML5-WebSocket是怎么實(shí)現(xiàn)聊天室的
本篇文章主要介紹了HTML5-WebSocket是怎么實(shí)現(xiàn)聊天室的，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),羅山企業(yè)網(wǎng)站建設(shè),羅山品牌網(wǎng)站建設(shè),網(wǎng)站定制,羅山網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,羅山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
在傳統(tǒng)的網(wǎng)頁(yè)實(shí)現(xiàn)聊天室的方法是通過(guò)每隔一段時(shí)間請(qǐng)求服務(wù)器獲取相關(guān)聊天信息來(lái)實(shí)現(xiàn)，然而html5帶來(lái)的websocket功能改變這了這種方式．由于websocket在連接服務(wù)器后允許保持連接來(lái)進(jìn)行數(shù)據(jù)交互，因此服務(wù)器可以主動(dòng)地向客戶端發(fā)送相應(yīng)的數(shù)據(jù)．對(duì)于html5的處理只需要在連接創(chuàng)建完成后在websocket的receive事件中處理接收的數(shù)據(jù)即可.下面通過(guò)實(shí)現(xiàn)一個(gè)聊天室來(lái)體驗(yàn)一下服務(wù)器可以主動(dòng)地向客戶端發(fā)的功能．
功能
一個(gè)簡(jiǎn)單的聊天室主要有以下幾個(gè)功能：
１）注冊(cè)
注冊(cè)要處理幾個(gè)事情，分別是注冊(cè)完成后獲取當(dāng)前服務(wù)器所有用戶列表，服務(wù)把當(dāng)前注冊(cè)成功的用戶發(fā)送給其他在線的用戶．
２）發(fā)信息
服務(wù)器把當(dāng)前接收的消息發(fā)送給在線的其他用戶
３）退出
服務(wù)器把斷開(kāi)的用戶通知其他用戶
聊天室完成的功能預(yù)覽如下:
C#服務(wù)端代碼
服務(wù)端的代碼只需要針對(duì)幾功能定義幾個(gè)方法即可，分別是注冊(cè)，獲取其他用戶和發(fā)送信息．具體代碼如下:
/// <summary>
/// Copyright ? henryfan 2012
///Email: henryfan@msn.com
///HomePage: http://www.ikende.com
///CreateTime: 2012/12/7 21:45:25
/// </summary>
class Handler
{
public long Register(string name)
{
TcpChannel channel = MethodContext.Current.Channel;
Console.WriteLine("{0} register name:{1}", channel.EndPoint, name);
channel.Name = name;
JsonMessage msg = new JsonMessage();
User user = new User();
user.Name = name;
user.ID = channel.ClientID;
user.IP = channel.EndPoint.ToString();
channel.Tag = user;
msg.type = "register";
msg.data = user;
foreach (TcpChannel item in channel.Server.GetOnlines())
{
if (item != channel)
item.Send(msg);
}
return channel.ClientID;
}
public IList<User> List()
{
TcpChannel channel = MethodContext.Current.Channel;
IList<User> result = new List<User>();
foreach (TcpChannel item in channel.Server.GetOnlines())
{
if (item != channel)
result.Add((User)item.Tag);
}
return result;
}
public void Say(string Content)
{
TcpChannel channel = MethodContext.Current.Channel;
JsonMessage msg = new JsonMessage();
SayText st = new SayText();
st.Name = channel.Name;
st.ID = channel.ClientID;
st.Date = DateTime.Now;
st.Content = Content;
st.IP = channel.EndPoint.ToString();
msg.type = "say";
msg.data = st;
foreach (TcpChannel item in channel.Server.GetOnlines())
{
item.Send(msg);
}
}
}只需要以上簡(jiǎn)單的代碼就完成了聊天室服務(wù)端的功能，對(duì)于用戶退出可以通過(guò)連接釋放事件來(lái)做處理具體代碼：
protected override void OnDisposed(object sender, ChannelDisposedEventArgs e)
{
base.OnDisposed(sender, e);
Console.WriteLine("{0} disposed", e.Channel.EndPoint);
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);
}
}這樣聊天定的服務(wù)端代碼就已經(jīng)完成了．
JavaScript代碼
對(duì)于html5代碼首先要做的一件事就是連接到服務(wù)器，相關(guān)javascript代碼如下:
function connect() {
channel = new TcpChannel();
channel.Connected = function (evt) {
callRegister.parameters.name = $('#nikename').val();
channel.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);
};
channel.Receive = function (result) {
if (result.type == "register") {
var item = getUser(result.data);
$(item).appendTo($('#lstOnlines'));
}
else if (result.type == 'unregister') {
$('#user_' + result.data.ID).remove();
}
else if (result.type == 'say') {
addSayItem(result.data);
}
else {
}
}
channel.Connect($('#host').val());
}通過(guò)Receive回調(diào)池?cái)?shù)來(lái)處理不同消息的情況，如果是接收到其他用戶的注冊(cè)信息，則把用戶信息添加到列表中；如果收到的其他用戶的退出信息則在用戶列表種移走；直接收到消息添加到消息顯示框中即可．有jquery的幫助以上事件都變得非常簡(jiǎn)單．
用戶注冊(cè)調(diào)用過(guò)程:
var callRegister = { url: 'Handler.Register', parameters: { name: ''} };
function register() {
$('#frmRegister').form('submit', {
onSubmit: function () {
var isValid = $(this).form('validate');
if (isValid) {
connect();
}
return false;
}
});
}獲取在線用戶列表過(guò)程:
var callList = { 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).appendTo($('#lstOnlines'));
}
});
}發(fā)送消息過(guò)程:
var callSay = { url: 'Handler.Say', parameters: {Content:""} }
function Say() {
callSay.parameters.Content = mEditor.html();
mEditor.html('');
channel.Send(callSay);
$('#content1')[0].focus();
}代碼下載：demo
總結(jié)
經(jīng)過(guò)代碼封裝后websocket的處理變得非常簡(jiǎn)單，如果你有興趣完全可以在此代碼上擴(kuò)展出一個(gè)更多功能的聊到室，如聊天室分組，發(fā)送信息圖片共享等等．
以上就是HTML5-WebSocket是怎么實(shí)現(xiàn)聊天室的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！
新聞標(biāo)題：HTML5-WebSocket是怎么實(shí)現(xiàn)聊天室的
URL分享：http://bm7419.com/article18/jdiogp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站營(yíng)銷(xiāo)、軟件開(kāi)發(fā)、企業(yè)建站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 成都網(wǎng)站優(yōu)化使用AJAX加強(qiáng)用戶體驗(yàn) 2016-11-16
- 營(yíng)銷(xiāo)型網(wǎng)站建設(shè)有三個(gè)問(wèn)題值得注意 2016-02-16
- 成都SEO知識(shí)之分享一些常見(jiàn)的搜索引擎優(yōu)化作弊 2016-11-12
- 網(wǎng)站改版改得好 收錄排名不會(huì)掉 2016-11-14
- 怎么判斷關(guān)鍵詞優(yōu)化的難易度 2016-11-02
- 企業(yè)建站后操作推廣過(guò)程中如何優(yōu)化關(guān)鍵詞？ 2016-11-12
- SEO優(yōu)化：SEO搜索引擎優(yōu)化策略？ 2016-11-15
- 怎么才能保持網(wǎng)站排名穩(wěn)定 2013-05-28
- 哪些鏈接對(duì)于網(wǎng)站排名更有價(jià)值（上） 2016-11-10
- 整站優(yōu)化與關(guān)鍵詞優(yōu)化有什么區(qū)別? 2015-10-05
- 增加網(wǎng)站收錄的方法都有哪些? 2013-09-01
- 營(yíng)銷(xiāo)型網(wǎng)站建設(shè)注意事項(xiàng) 2016-08-24