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 在线聊天工具,给你的外贸网站增加一个在线聊天工具吧
给你的外贸网站增加个在线聊天工具,你知道如何加在线聊天工具吗,在线聊天工具使用哪家的好呢? 我们要做个好的外贸网站,就需要不断的改善网站的客户体验,让你的网站有更好的成交转换率.其中,给网站增加个在线 ...
最新文章
- 近几年,关于基于Imagenet数据集图像分类的模型总结
- Java的值传递解析
- 热血沙城-3.2移植-古月-cocos2dx源码
- vue框架+cesium项目怎么才能运行成功
- zabbix详解(六)——zabbix 添加监控主机
- Python3.7.2版本出现ModuleNotFoundError: No module named 'paramiko'解决办法
- 基于java的论文查重系统设计
- mysql 省份名排序,mysql省份表,含行政区划代码、省份名和省份全拼
- arcgis api for js绘制箭头图
- Win10设置:输入法快捷键【仅保留中英切换】,其他花里胡哨快捷键全部删除
- 天梯图excl_2017最全【CPU天梯图】
- 在word2015中的条形图在灰度的情况下不明显
- 编写KNN算法预测泰坦尼克号存活率
- 浏览器导出ssl证书导入jdk
- 推荐算法(一)--基本介绍
- 【C++】链表及基本操作
- 怎么在Excel2003版中查找重复值
- icloud是什么?
- python 找到dataframe中哪些列是常数列 即 固定值
- 2021中国留学白皮书——附下载链接
热门文章
- 剑指offer——面试题39-2:平衡二叉树
- Leetcode 413.等差数列划分
- ssd训练时提示:Cannot copy param 0 weights from 'xxxx',以及提示No module named caffe.proto,推理时设置GPU模式
- 对tensorflow 的BatchNormalization的坑的理解与测试
- 洛谷 P2647 最大收益
- Scrapy运行时出现的错误 :exception.ImportError No module named win32api
- 【读书】《当我跑步时,我谈些什么》书评:我跑步时,只是跑着
- 使用MonoDevelop开发跨平台的应用程序
- Exchange2013 企业部署解决方案-Part 2
- java JDK设置环境变量