在线聊天室html5源码,HTML5WebSocket实现聊天室的代码示例
本篇文章主要介绍了HTML5-WebSocket实现聊天室示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
在传统的网页实现聊天室的方法是通过每隔一段时间请求服务器获取相关聊天信息来实现,然而html5带来的websocket功能改变这了这种方式.由于websocket在连接服务器后允许保持连接来进行数据交互,因此服务器可以主动地向客户端发送相应的数据.对于html5的处理只需要在连接创建完成后在websocket的receive事件中处理接收的数据即可.下面通过实现一个聊天室来体验一下服务器可以主动地向客户端发的功能.
功能
一个简单的聊天室主要有以下几个功能:
1)注册
注册要处理几个事情,分别是注册完成后获取当前服务器所有用户列表,服务把当前注册成功的用户发送给其他在线的用户.
2)发信息
服务器把当前接收的消息发送给在线的其他用户
3)退出
服务器把断开的用户通知其他用户
聊天室完成的功能预览如下:
C#服务端代码
服务端的代码只需要针对几功能定义几个方法即可,分别是注册,获取其他用户和发送信息.具体代码如下:
///
/// Copyright © henryfan 2012
///Email: henryfan@msn.com
///HomePage: http://www.gxlcms.com/
///CreateTime: 2012/12/7 21:45:25
///
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 List()
{
TcpChannel channel = MethodContext.Current.Channel;
IList result = new List();
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);
}
}
}
只需要以上简单的代码就完成了聊天室服务端的功能,对于用户退出可以通过连接释放事件来做处理具体代码:
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;
}
});
}
获取在线用户列表过程:
发送消息过程:
总结
经过代码封装后websocket的处理变得非常简单,如果你有兴趣完全可以在此代码上扩展出一个更多功能的聊到室,如聊天室分组,发送信息图片共享等等.
在线聊天室html5源码,HTML5WebSocket实现聊天室的代码示例相关推荐
- 开源版-在线客服系统源码_网页聊天室源码_webim
2019独角兽企业重金招聘Python工程师标准>>> WoLive是一款在线客服系统源码,支持PC Web和移动端,只需嵌入一段js代码即可快速接入.购买后可私有化部署,WoLiv ...
- phplivechat安卓app下载_PHP Live Chat Pro在线客服系统源码:即时聊天通迅源+手机app+教程...
源码作者:未知 文件大小:4.53 MB 运行环境:php/mysql PHP Live Chat Pro在线客服系统源码介绍 在线客服系统为独立部署,不需要任何授权,基于PHP和MySQL ,能接入 ...
- 开源版客服代码-在线客服系统源码_网页聊天室源码_龙塘智能客服_znkefu
拥有功能 1.机器人智能客服 2.人工客服 3.离线消息 4.留言功能 8.统计数据 9.数据加密 10.全渠道接入(网站/H5/公众号/小程序/安卓/苹果APP) 11.对话标签 12.顾客标签 1 ...
- PHP匿名在线聊天室系统源码 自适应PC+WAP端
介绍: PHP匿名在线聊天室系统源码 自适应PC+WAP端 可发语音.图片 修改数据库config\settings.php可拿去搭建专门跟客户聊天的网站 网盘下载地址: http://kekewl. ...
- PHP匿名在线聊天室系统源码
PHP匿名在线聊天室系统源码,自适应PC+WAP端,可发 语音.图片.带有三套主题模板,完美可用. [完整源码链接] PHP匿名在线聊天室系统源码.zip-PHP文档类资源-CSDN文库
- 分享66个PHP聊天室类源码,总有一款适合您
分享66个PHP聊天室类源码,总有一款适合您 66个PHP聊天室类源码下载链接:https://pan.baidu.com/s/1_Fbbc3WMVWN7jjgTRaCnXw?pwd=h75j 提取码 ...
- ZBLOG即时聊天(客服)插件v1.3.2版本下载,强大的在线客服系统源码
ZBLOG即时聊天(客服)插件v1.3.2版本下载,强大的在线客服系统源码 测试报告:本插件我已按照测试了,正常按照开启,插件配置可正常顺利保存,后台配置项无问题.不过因为本插件要配置的东西太多了,且 ...
- 2022在线微信对话生成器源码,抖音微信聊天搞笑视频制作神器
在线微信对话生成器源码,抖音微信聊天搞笑视频制作神器 微信对话生成器,是一款在线微信聊天对话制作的工具,它可以设置苹果或安卓状态栏,包括手机电量.手机时间等,还可以设置不同用户的角色,然后发送文字.语 ...
- JAVA毕业设计html5在线医疗系统计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计html5在线医疗系统计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计html5在线医疗系统计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: 项目架构:B/S ...
最新文章
- 模块的使用,包,及程序开发规范
- c#与access建立连接用作登录_Linux网络配置 | FTP 实战-虚拟用户登录
- 【CV】图像分割二十年,盘点影响力最大的10篇论文
- 判断数组对象里面的某个属性全部为true才执行下一步操作
- 深入研究Servlet线程安全性问题
- C语言字符串的输入和输出
- 五校联考R1 Day2T2 矩阵matrix(容斥)
- Codeforces 463D Gargari and Permutations(求k个序列的LCS)
- 蚂蚁金服“定损宝”现身AI顶级会议NeurIPS
- Gradle与Makefile构建工具的对比
- firefox 3.0 beta 1 试用与下载
- 双态IT时代,你需要什么样的IT咨询服务?
- 斐波纳契数列 python123
- 神经网络正则化java_聊聊神经网络中的正则化
- mac下用户用户组命令行操作
- java中数据类型的等级_Java 数据类型、变量
- R16 NR CDRX
- Android Studio编程技巧
- openoffice java awt_OpenOffice开发者指南笔记
- Golang实现并发版网络爬虫:豆瓣-电影名人数评分爬取并保存文件