基于express socket.io 開發(fā)的聊天室
功能
- 實時聊天
- 私聊功能
- 用戶列表
- 上線通知
- 下線通知
private.png
server
var express = require('express')
var app = express()
var http = require('http').Server(app)
var io = require('socket.io')(http)
// 用戶列表
var userList = []
// express 靜態(tài)資源中間件
app.use(express.static('../static'))
// 聊天室主頁面
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html')
})
// 上線廣播通知
io.sockets.on('connection', socket => {
socket.on('login', name => {
console.log(`---------------${name}上線了---------------`);
// 儲存當前登錄用戶ID
socket.emit('getSelfId', socket.id)
// 通知登錄
socket.broadcast.emit('login', name)
if (userList.indexOf(name) < 0) {
userList.push({
name: name,
id: socket.id
})
}
updataUserList()
})
})
io.on('connection', (socket) => {
// 接收消息
socket.on('chat message', (msg) => {
io.emit(`getMsg`, msg)
})
socket.on('privateMsg', data => {
io.to(data.sendId).emit(`getPrivateMsg`, data)
io.to(data.selfId).emit(`selfMsg`, data)
})
// 下線通知
socket.on('disconnect', () => {
userList.forEach((item, index, arr) => {
if (item.id === socket.id) {
arr.splice(index, 1)
updataUserList()
console.log(`---------------${item.name}下線了---------------`);
socket.broadcast.emit('loginOut', item.name)
}
})
})
})
// 更新user列表
let timer
function updataUserList() {
clearTimeout(timer)
timer = setTimeout(() => {
io.sockets.emit('userList', userList)
}, 300)
}
http.listen(3000, function(){
console.log('server begin...')
})
client
<!-- 消息列表 -->
<ul id="messages"></ul>
<!-- 推送消息 -->
<div class="form">
<i class="myName"></i>
<input id="msg" autocomplete="off" /><button id="send">Send</button>
</div>
<div class="inputName" style="display: none">
<div class="msg-layer-bg"></div>
<div class="msg-layer showAlert">
<h5>加入聊天室</h5>
<div class="msg-con">
<input type="text" maxlength="4" placeholder="請輸入您的昵稱" class="nickName">
</div>
<div class="layer-btn"><input type="button" class="layer-commit" value="Join"></div>
</div>
</div>
<div class="privateDialog" style="display: none">
<div class="msg-layer-bg"></div>
<div class="msg-layer showAlert">
<h5 class="private-title">與大地私聊</h5>
<div class="msg-con">
<textarea placeholder="請輸入對話內(nèi)容" class="privateMsg"></textarea>
</div>
<div class="layer-btn"><input type="button" class="privateMsg-commit" value="發(fā)送"></div>
</div>
</div>
<div class="userList-container">
<h3>在線列表</h3>
<ul class="userList">
</ul>
</div>
`
`
$(document).ready(function () {
toastr.options = {
"closeButton": true
}
var urlParams = function () {
var url = location.search // 獲取url中"?"符后的字串
url = url.replace('&', '&')
var param = {}
if (url.indexOf('?') !== -1) {
var str = url.substr(1)
var strs = str.split('&')
for (var i = 0; i < strs.length; i++) {
param[strs[i].split('=')[0]] = (strs[i].split('=')[1])
}
}
return param
}
var params = urlParams()
var socket = io(),
nickName,privateId,selfId,privateName,
$privateDialog = $('.privateDialog'),
$msg = $('#msg'),
$privateMsg = $('.privateMsg'),
$privateTitle = $('.private-title')
$send = $('#send'),
$messages = $('#messages'),
$inputName = $('.inputName'),
$body = $('body'),
$nickName = $('.nickName'),
$myName = $('.myName'),
$userList = $('.userList');
$listContainer = $('.userList-container'),
$privateMsgCommit = $('.privateMsg-commit')
dialogShow = false
function socketIo() {
$myName.text(nickName)
// 登錄
socket.emit('login', nickName)
// 發(fā)送消息
$send.click(function(){
socket.emit('chat message', {
name: nickName,
msg: $msg.val()
})
$msg.val('').focus();
return false;
});
// 接收到廣播消息
socket.on('getMsg', returnMsg => {
$messages.append(`<li>${returnMsg.name}說: ${returnMsg.msg}</li>`)
})
// 接受私聊消息
socket.on('getPrivateMsg', returnMsg => {
$messages.append(`<li>${returnMsg.name}對您說: ${returnMsg.msg}</li>`)
})
// 接受私聊消息
socket.on('selfMsg', returnMsg => {
$messages.append(`<li>我對${privateName}說: ${returnMsg.msg}</li>`)
})
// 登錄廣播通知
socket.on('login', name => {
toastr.success(`${name}上線了~`, '上線提醒')
showNotice(name, '上線')
})
// 獲取自己的id
socket.once('getSelfId', id => {
selfId = id
})
// 下線廣播通知
socket.on('loginOut', name => {
toastr.info(`${name}下線了`)
showNotice(name, '下線')
})
// 在線用戶列表
socket.on('userList', userList => {
var _arr = []
userList.forEach(item => {
_arr.push(`<li data-id="${item.id}">${item.name}</li>`)
})
$userList.html(_arr.join(''))
})
}
// 桌面通知
function showNotice(name, type) {
Notification.requestPermission(function (perm) {
if (perm == "granted") {
var notification = new Notification("上線提醒", {
dir: "auto",
lang: "utf-8",
tag: "testTag",
icon: "img/icon.png",
body: `${name}${type}了`,
renotify: true
});
}
})
}
// 輸入昵稱邏輯
!function () {
nickName = localStorage.getItem("nickName")
if (!nickName) {
$inputName.show()
} else {
socketIo ()
}
// 點擊發(fā)送事件以及回車事件監(jiān)聽
$body.on('click', '.layer-commit', function(){
var _val = $nickName.val()
if (!!$nickName) {
localStorage.setItem('nickName', _val)
nickName = _val
$inputName.hide()
socketIo()
}
})
// 私聊發(fā)送
.on('click', '.privateMsg-commit', function(){
socket.emit('privateMsg', {
name: nickName,
sendId: privateId,
selfId: selfId,
privateName: privateName,
msg: $privateMsg.val()
})
$privateMsg.val('')
$privateDialog.hide()
dialogShow = false
})
// 鍵盤回車發(fā)送
.on('keydown', e => {
if (e.keyCode == 13) {
if (dialogShow) {
$privateMsgCommit.trigger('click')
} else {
$send.trigger('click')
}
}
})
}()
$userList.on('click', 'li', function () {
var _this = $(this)
var _id = _this.data('id')
var _name = _this.text()
if (_name == nickName) {
toastr.error('請不要自嗨~')
} else {
$privateTitle.text(`與${_name}私聊`)
dialogShow = true
privateId = _id
privateName = _name
$privateDialog.show()
$privateMsg.focus()
}
})
});
