HTML5-WebSocket实现聊天室示例

2020-04-24 19:23:15易采站长站整理

msg.data = st;

foreach (TcpChannel item in channel.Server.GetOnlines())

{

item.Send(msg);

}
}
}

只需要以上简单的代码就完成了聊天室服务端的功能,对于用户退出可以通过连接释放事件来做处理具体代码:

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);

}

}

这样聊天定的服务端代码就已经完成了.

JavaScript代码

对于html5代码首先要做的一件事就是连接到服务器,相关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());

}

通过Receive回调池数来处理不同消息的情况,如果是接收到其他用户的注册信息,则把用户信息添加到列表中;如果收到的其他用户的退出信息则在用户列表种移走;直接收到消息添加到消息显示框中即可.有jquery的帮助以上事件都变得非常简单.

用户注册调用过程:

var callRegister = { url: 'Handler.Register', parameters: { name: ''} };

function register() {

$('#frmRegister').form('submit', {

onSubmit: function () {

var isValid = $(this).form('validate');

if (isValid) {

connect();

}

return false;

}

});

}

获取在线用户列表过程:

var callList = { url: 'Handler.List', parameters: {} };