socket.io html5 聊天,socket.io实现在线聊天页面
一.要点分析
(1) 对于socket.io,它是基于事件响应的socket,可以进行长时间的消息传递。其服务端使用的方法主要不过就是两个,on()和emit()
io.on('connetcion',function(socket) {
socket.on('event',function(data) {
/*执行相应的方法*/
//通知客户端执行事件
socket.emit('new event',{data:'mydata'});
});
});
(2)搭建好服务器端后就进行客户端连接
//引入socket
var socket = io();
socket.on('event',function(data) {
/*执行事件*/
//通知服务器端执行事件
socket.emit('new event',{data:'mydata'});
});
(3)接下来就是对视图的搭建
二.源代码和注释分析
(1) app.js:
//引入express框架
var express = require('express');
var app = express();
//服务端创建
var server = require('http').createServer(app);
//使用socket.io进行通信
var io = require('socket.io')(server);
var port = process.env.POST || 8000;
//服务开启
server.listen(port,function() {
console.log("The chatting room is running at port: " + port);
});
//使用静态文件目录
app.use(express.static(__dirname + '/public'));
//当前进入聊天室的人数
var usersNumber = 0;
//客户端通过socket链接服务端
io.on('connection',function(socket) {
//默认没有用户进入
var addUser = false;
//客户端发送新的消息
socket.on('new message',function(data) {
//广播所有在线客户端新消息的产生
socket.broadcast.emit('new message',{
userName: socket.userName,
message: data
});
});
//客户端发送有用户加入的消息
socket.on('add user',function(userName) {
if(addUser) return;
socket.userName = userName;
usersNumber++;
addUser=true;
//向客户端发送登陆成功
socket.emit('login',{
userName: socket.userName,
usersNumber:usersNumber
});
//广播有新用户加入
socket.broadcast.emit('new user join',{
userName:socket.userName,
usersNumber:usersNumber
});
});
//客户端断开链接
socket.on('disconnect',function() {
if(addUser) {
usersNumber--;
//通知所有客户端有用户离开
socket.broadcast.emit('user left',{
userName:socket.userName,
usersNumber:usersNumber
});
}
});
});
(2) main.js:
$(function(){
//创建socket与服务端链接
var socket = io();
//通过jquery获取dom节点
var $logPage = $('.logPage');
var $logList = $('.logList');
var $chatPage = $('.chatPage');
var $messageContent = $('.messageContent');
var $messageList = $('.messageList');
var $messageInput = $('.messageInput');
var $usernameInput = $('.usernameInput');
var $sendMessage = $('.sendMessage');
var $addUser = $('.addUser');
var $loginPage = $('.loginPage');
var $messageInputBar = $('.messageInputBar');
//默认当前登陆输入框为焦点状态
var $currentInput = $usernameInput.focus();
//用于记录当前的用户名
var userName;
var connect = false;
//监听服务器是否有新的消息产生,有的话就显示消息到列表
socket.on('new message',function(data) {
//在列表框中添加消息,类型为收取的消息
addNewMessage(data,2);
});
//监听服务器是否登陆成功,成功就显示成功登陆
socket.on('login',function(data) {
userLogin(data);
});
//监听服务器是否有新的用户加入,有的话就显示
socket.on('new user join',function(data) {
newUserJoin(data);
});
//监听服务器是否有用户离开
socket.on('user left',function(data){
userLeft(data);
});
function userLogin(data) {
//登陆成功,输出信息
connect = true;
$logList.empty();
$logList.append('
Name: ' + data.userName + ' is joined
');
$logList.append('
CurrentNumber: ' + data.usersNumber + '
');
}
function addNewMessage(data,state) {
if(state == 1) {
$messageList.append(
'
');
}else {
$messageList.append(
'
');
}
}
function newUserJoin(data) {
$logList.empty();
$logList.append('
Name: ' + data.userName + ' is joined
');
$logList.append('
CurrentNumber: ' + data.usersNumber + '
');
}
function userLeft(data) {
$logList.empty();
$logList.append('
User: ' + data.userName + ' has left
');
$logList.append('
CurrentNumber: ' + data.usersNumber + '
');
}
//当用户点击发送消息时的事件
$sendMessage.click(function(event) {
/* Act on the event */
var message = $messageInput.val();
if (message && connect) {
$messageInput.val('');
addNewMessage({
userName: userName,
message: message
},1);
socket.emit('new message', message);
}
});
//当用户点击登陆事件
$addUser.click(function(event) {
/* Act on the event */
userName = $usernameInput.val().trim();
if (userName) {
$loginPage.fadeOut();
$chatPage.show();
$messageInputBar.show();
$loginPage.off('click');
$currentInput = $messageInput.focus();
socket.emit('add user', userName);
}
});
});
(3) index.html:
* {
font-family: 'Microsoft Yahei';
}
.header {
position: fixed;
}
.content {
padding-top: 2rem;/*有顶部固定导航条时设置*/ padding-bottom: 5rem;/*有底部固定导航条时设置*/
}
.chatPage {
display: none;
}
.logPage {
background-color:#00FFFF;
border-radius: .2rem;
}
.messageInputBar {
display: none;
}
.chatItem {
}
Chatting Room
(4) 使用aui视图框架
socket.io html5 聊天,socket.io实现在线聊天页面相关推荐
- 高仿Telegram IM Chat 聊天软件 即时通讯 在线聊天加社群 纯静态UI架构介绍
高仿Telegram IM Chat 聊天软件 即时通讯 在线聊天加社群 纯静态UI 全端覆盖!苹果手机端.安卓手机端.网页版.电脑PC版.无论哪个平台,都能畅通无阻! 性价比高!功能全面而价格低廉! ...
- php ws聊天,php+websocket实现在线聊天室
熟悉web开发的朋友明白,平时我们与服务端的数据请求都是基于HTTP协议,而HTTP协议,通信请求只能由客户端发起,服务端对请求做出应答处理.也就是说服务端不能主动向我们推送数据,而像即时通讯这类应用 ...
- JAVA利用多线程和Socket制作GUI界面的在线聊天室
目录 前言 功能设计 GUI画面展示 服务器端 客户端 私聊窗口 主要代码 服务器端 客户端 其它代码 打包成jar 打包成exe文件 如何让其它电脑访问聊天室? 最后 前言 最近刚好是期末,碰上Ja ...
- 在线聊天JAVA后端_java web 在线聊天的基本实现
随着互联网的发展,http的协议有些时候不能满足需求,比如在现聊天的实现.如果使用http协议必须轮训,或者使用长链接.必须要一个request,这样后台才能发送信息到前端. 后台不能主动找客户端通信 ...
- 基于Server-Sent Event的简单在线聊天室
一.Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览 ...
- android socket 长连接_php socket如何实现长连接
长连接是什么? 朋友们应该都见过很多在线聊天工具和网页在线聊天的工具.学校内有一种熟悉的功能,如果有人回复你了,网站会马上出现提示,此时你并没有刷新页面:Gmail也有此功能,如果邮箱里收到了新的邮件 ...
- Yahoo,Msn,Skype,QQ,阿里旺旺在线聊天链接接口调用
Yahoo,Msn,Skype,QQ,阿里旺旺在线聊天链接接口调用 <%@ Page Language="C#" AutoEventWireup="true&quo ...
- crm客户管理系统PHP网络版销售客户资料管理系统带在线聊天
crm客户管理系统PHP网络版销售客户资料管理系统带在线聊天 扁平化crm客户管理系统PHP源码开源web网络版销售客户信息管理系统,CRM客户管理系统支持员工在线聊天,主面板左边是菜单右边是提醒 最 ...
- html 在线聊天工具,给你的外贸网站增加一个在线聊天工具吧
给你的外贸网站增加个在线聊天工具,你知道如何加在线聊天工具吗,在线聊天工具使用哪家的好呢? 我们要做个好的外贸网站,就需要不断的改善网站的客户体验,让你的网站有更好的成交转换率.其中,给网站增加个在线 ...
最新文章
- python使用lassocv生成影像组学(radiomic)模型的系数表
- 一个n位的数,去掉其中的k位,问怎样去使得留下来的(n-k)位数按原来的前后顺序组成的数最小...
- 高可靠芯片搭配视觉演算法,影像式ADAS满足车规要求
- 【Python基础】刷爆网络的动态条形图,3行Python代码就能搞定
- SparkStreaming “Could not read data from write ahead log record” 报错分析解决
- 炼油机出来的什么油_小型精炼油设备10来万一套供不应求,油作坊提高油品质量才有出路...
- linux查看本机所有预设的系统变量,如何设置与查看Linux系统中的环境变量?
- CCNP-第十五篇-VXLAN(一)
- 百炼成钢!自己动手写一个深度学习框架!
- PowerShell 方式部署Sharepoint Solution
- android程序安全编码向导,Android安全编码规范
- 命名管道的使用方式:消息模式/字节模式
- jruby环境下REDMINE安装纪要
- 2.jenkins 新建一个任务
- 计算机苏教版初一教案,文笔精华(苏教版七年级) 教案教学设计
- c#位数不够0补充完_人教版四年级上册数学第六单元《除数是两位数的除法》
- 学习阮一峰老师-互联网协议笔记(IP/UDP/TCP/HTTP)
- 计算机网络(二)—— 物理层(1、2、3):物理层的基本概念、物理层的下面的传输媒体、传输方式
- hadoop面试题以及答案
- 抖音:红、蓝海品类,如何创作优质内容?
热门文章
- C++ 整型和字符串相互转换
- tensorflow.python.framework.tensor_shape.TensorShape 类
- torch.nn.Conv2d
- Tensorflow 实战 Google 深度学习框架(第2版)---- 10.2.2节 P274 代码
- 文件存储,块存储,对象存储的区别
- python 入门拾遗
- CentOS/RHEL Linux安装EPEL第三方软件源
- 高效通信模型之 - 异步通信模型
- POJ3169 Layout(差分约束)
- 文件磁盘相关函数[2]-建立新文件 FileCreate