github地址:https://github.com/beatsky/Node.js/tree/master/chatroom
socket.io
安装
npm install socket.io
服务端代码编写
建立服务
const http = require('http');
const fs= require('fs');
// 新建服务
const app = http.createServer();
app.listen(3000);
// 新建io服务
const server = http.createServer();
const io = require('socket.io')(server);
server.listen(3001);
var clientCount = 0;
由于只是小项目,暂时不用框架,模板。简单的加载下html文件
app.on('request', function (req, res) {
var url = req.url;
if (url === '/' || url === '/js/io.js' || url === '/js/md5.js') {
if(url === '/'){
var file_name = './views/index.html';
}else{
var file_name = './views/' + url;
}
fs.readFile(file_name, function (err, data) {
if(err){
res.end(`<h1>404as not found<h1>`);
}else{
res.end(data);
}
})
}else{
res.end(`<h1>404 not found<h1>`)
}
})
socket代码
io.on('connection', function (socket) {
clientCount++; // 记录进入聊天室人数
socket.nickname = '第' + clientCount + '人';
io.emit('enter', '欢迎第' + clientCount + '名成员进入聊天室'); // 向所有客户端广播新进入聊天室
socket.on('message', function (data) {
io.emit('message', data); // 向客户端推送新消息
socket.name = data.name;
})
socket.on('disconnect', function(){
if(socket.name){ // 监听成员断开链接,并根据成员是否发言,做出判断
io.emit('leave', socket.name + '离开聊天室');
}else{
io.emit('leave', socket.nickname + '什么也没说就走了');
}
})
});
客户端代码
// socket 端口
var socket = io.connect('http://localhost:3001');
// 获取相应元素节点
var sendBtn = document.getElementById('sendBtn');
var mess = document.getElementById('mess');
var panel = document.getElementById('panel');
var yourname = document.getElementById('yourname');
// 定义本地数据
var msgData = {};
// 生成 1~4随机数
var i = Math.round(4 * Math.random());
// 对话框颜色class
var colorArr = ["bg-primary", "bg-success", "bg-info", "bg-warning", "bg-danger"]
相应方法
// 将消息写入对应节点
function sendMessage(str, type) {
var p = document.createElement('p');
if(type == 'enter'){
p.className = 'text-success';
p.innerHTML = str;
}else if(type == 'leave'){
p.className = 'text-danger';
p.innerHTML = str;
}else{
p.innerHTML = str.name + ':' + str.text;
p.className = colorArr[str.num];
}
panel.appendChild(p);
document.documentElement.scrollTop = document.documentElement.scrollHeight;
}
// 将最新消息添加黄色边框
function currentBubble() {
var msgBubble = panel.getElementsByTagName('p');
var len = msgBubble.length;
msgBubble[len-2].style.border = 'none';
msgBubble[len-1].style.border = '1px solid yellow';
}
// 设置成员名字
function setName() {
sendBtn.onclick = function () {
msgData.name = mess.value;
msgData.text = '大家好我是 ' + msgData.name;
msgData.num = i;
if(msgData.text){
yourname.innerHTML = msgData.name;
socket.emit('message', msgData);
}
mess.value = '';
}
}
// 发送消息
function txtInput() {
sendBtn.onclick = function () {
msgData.text = mess.value;
if(msgData.text){
socket.emit('message', msgData);
}
mess.value = '';
}
}
// 判断是否已命名,执行对应方法
function chat(data) {
if(data.name){
txtInput();
}else{
setName();
}
}
根据对用socket方法执行对应函数
socket.on('enter', function (data) {
sendMessage(data, 'enter');
chat(msgData);
})
socket.on('message', function (data) {
sendMessage(data, 'message');
chat(msgData);
})
socket.on('leave', function (data) {
sendMessage(data, 'leave');
})