express+mongodb+socket.io
node后端代码
// Setup basic express server var express = require('express'); var app = express(); var path = require('path'); var server = require('http').createServer(app); var io = require('socket.io')(server); var port = process.env.PORT || 9000; var MongoClient = require('mongodb').MongoClient; var DB_CONN_STR = 'mongodb://172.16.81.36:27017/runoob'; server.listen(port, function () { console.log('Server listening at port %d', port); }); // Routing app.use(express.static(path.join(__dirname, 'public'))); // Chatroom var numUsers = 0; app.get('/setUsername', function (req, res) { if(req.query.username!=undefined&&req.query.username!=''&&req.query.password!=undefined&&req.query.password!=''){ var selectData = function(db, callback) { //连接到表 var collection = db.collection('site'); //查询数据 var whereStr = {"username":req.query.username,"password":req.query.password}; collection.find(whereStr).toArray(function(err, result) { if(err) { console.log('Error:'+ err); return; } callback(result); }); } var insertData = function(db, callback) { //连接到表 site var collection = db.collection('site'); //插入数据 var data = [{"username":req.query.username,"password":req.query.password}]; collection.insert(data, function(err, result) { if(err) { console.log('Error:'+ err); return; } callback(result); }); } MongoClient.connect(DB_CONN_STR, function(err, db) { console.log("连接成功!"); selectData(db, function(result) { // console.log(result.length); if(result==''){ console.log("请输入真实姓名"); res.send({ errorCode:-1, errorMsg:'请输入正确的姓名和密码' }); /* 注册 */ // insertData(db, function(result) { // console.log(result); // res.send({ // errorCode:-1, // errorMsg:'请输入真实姓名' // }); // db.close(); // }); }else{ console.log("登录成功"); res.send({ errorCode:0, errorMsg:'登录成功' }); } db.close(); }); }); }else{ res.send({ errorCode:-1, errorMsg:'姓名和密码不能为空' }); } }) io.on('connection', function (socket) { var addedUser = false; // when the client emits 'new message', this listens and executes socket.on('new message', function (data) { // we tell the client to execute 'new message' socket.broadcast.emit('new message', { username: socket.username, message: data }); }); // when the client emits 'add user', this listens and executes socket.on('add user', function (username) { if (addedUser) return; // we store the username in the socket session for this client socket.username = username; ++numUsers; addedUser = true; socket.emit('login', { numUsers: numUsers }); // echo globally (all clients) that a person has connected socket.broadcast.emit('user joined', { username: socket.username, numUsers: numUsers }); }); // when the client emits 'typing', we broadcast it to others socket.on('typing', function () { socket.broadcast.emit('typing', { username: socket.username }); }); // when the client emits 'stop typing', we broadcast it to others socket.on('stop typing', function () { socket.broadcast.emit('stop typing', { username: socket.username }); }); // when the user disconnects.. perform this socket.on('disconnect', function () { if (addedUser) { --numUsers; // echo globally that this client has left socket.broadcast.emit('user left', { username: socket.username, numUsers: numUsers }); } }); });
前端代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>即时通讯</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="pages"> <li class="chat page"> <div class="chatArea"> <ul class="messages"> <!-- 信息 --> </ul> </div> <!-- 输入框 --> <input class="inputMessage" placeholder="Type here..."/> </li> <!-- 登录页面 --> <li class="login page"> <div class="form"> <h3 class="title">请设置你的名字</h3> <input class="usernameInput" type="text" maxlength="14" /> <h3 class="title">请设置你的密码</h3> <input class="passwordInput" type="password" maxlength="14" /> <br> <br> <br> <input type="button" name="" value="登录" class="loginBtn" style='height:60px;width:160px;font-size:30px;'> </div> </li> </ul> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="/socket.io.js"></script> <script src="/main.js"></script> </body> </html>
main.js文件
$(function() { var FADE_TIME = 150; // ms var TYPING_TIMER_LENGTH = 400; // ms var COLORS = [ '#e21400', '#91580f', '#f8a700', '#f78b00', '#58dc00', '#287b00', '#a8f07a', '#4ae8c4', '#3b88eb', '#3824aa', '#a700ff', '#d300e7' ]; // Initialize variables var $window = $(window); var $usernameInput = $('.usernameInput'); // Input for username var $messages = $('.messages'); // Messages area var $inputMessage = $('.inputMessage'); // Input message input box var $loginPage = $('.login.page'); // The login page var $chatPage = $('.chat.page'); // The chatroom page // Prompt for setting a username var username; var connected = false; var typing = false; var lastTypingTime; // var $currentInput = $usernameInput.focus(); $('.loginBtn').click(function(){ setUsername (); }) var socket = io(); function addParticipantsMessage (data) { var message = ''; if (data.numUsers === 1) { message += "有 1 个人加入了聊天室"; } else { message += "有 " + data.numUsers + " 个人加入了聊天室"; } log(message); } // Sets the client's username function setUsername () { username = cleanInput($usernameInput.val().trim()); var password=$('.passwordInput').val(); var url='http://172.16.81.36:9000/setUsername'; console.log(username); $.ajax({ url:url, type:'get', data:{ username:username, password:password }, success:function(res){ console.log(res); if (res.errorCode==0) { $loginPage.fadeOut(); $chatPage.show(); $loginPage.off('click'); // $currentInput = $inputMessage.focus(); // Tell the server your username socket.emit('add user', username); }else{ alert(res.errorMsg) username=false; } } }) // If the username is valid } // Sends a chat message function sendMessage () { var message = $inputMessage.val(); // Prevent markup from being injected into the message message = cleanInput(message); // if there is a non-empty message and a socket connection if (message && connected) { $inputMessage.val(''); addChatMessage({ username: username, message: message }); // tell server to execute 'new message' and send along one parameter socket.emit('new message', message); } } // Log a message function log (message, options) { var $el = $('<li>').addClass('log').text(message); addMessageElement($el, options); } // Adds the visual chat message to the message list function addChatMessage (data, options) { // Don't fade the message in if there is an 'X was typing' var $typingMessages = getTypingMessages(data); options = options || {}; if ($typingMessages.length !== 0) { options.fade = false; $typingMessages.remove(); } var $usernameDiv = $('<span class="username"/>') .text(data.username) .css('color', getUsernameColor(data.username)); var $messageBodyDiv = $('<span class="messageBody">') .text(data.message); var typingClass = data.typing ? 'typing' : ''; var $messageDiv = $('<li class="message"/>') .data('username', data.username) .addClass(typingClass) .append($usernameDiv, $messageBodyDiv); addMessageElement($messageDiv, options); } // Adds the visual chat typing message function addChatTyping (data) { data.typing = true; data.message = '用户正在输入'; addChatMessage(data); } // Removes the visual chat typing message function removeChatTyping (data) { getTypingMessages(data).fadeOut(function () { $(this).remove(); }); } // Adds a message element to the messages and scrolls to the bottom // el - The element to add as a message // options.fade - If the element should fade-in (default = true) // options.prepend - If the element should prepend // all other messages (default = false) function addMessageElement (el, options) { var $el = $(el); // Setup default options if (!options) { options = {}; } if (typeof options.fade === 'undefined') { options.fade = true; } if (typeof options.prepend === 'undefined') { options.prepend = false; } // Apply options if (options.fade) { $el.hide().fadeIn(FADE_TIME); } if (options.prepend) { $messages.prepend($el); } else { $messages.append($el); } $messages[0].scrollTop = $messages[0].scrollHeight; } // Prevents input from having injected markup function cleanInput (input) { return $('<div/>').text(input).html(); } // Updates the typing event function updateTyping () { if (connected) { if (!typing) { typing = true; socket.emit('typing'); } lastTypingTime = (new Date()).getTime(); setTimeout(function () { var typingTimer = (new Date()).getTime(); var timeDiff = typingTimer - lastTypingTime; if (timeDiff >= TYPING_TIMER_LENGTH && typing) { socket.emit('stop typing'); typing = false; } }, TYPING_TIMER_LENGTH); } } // Gets the 'X is typing' messages of a user function getTypingMessages (data) { return $('.typing.message').filter(function (i) { return $(this).data('username') === data.username; }); } // Gets the color of a username through our hash function function getUsernameColor (username) { // Compute hash code var hash = 7; for (var i = 0; i < username.length; i++) { hash = username.charCodeAt(i) + (hash << 5) - hash; } // Calculate color var index = Math.abs(hash % COLORS.length); return COLORS[index]; } // Keyboard events $window.keydown(function (event) { // Auto-focus the current input when a key is typed if (!(event.ctrlKey || event.metaKey || event.altKey)) { // $currentInput.focus(); } // When the client hits ENTER on their keyboard if (event.which === 13) { // console.log(username); if (username) { sendMessage(); socket.emit('stop typing'); typing = false; } else { setUsername(); } } }); $inputMessage.on('input', function() { updateTyping(); }); // Click events // Focus input when clicking anywhere on login page $loginPage.click(function () { // $currentInput.focus(); }); // Focus input when clicking on the message input's border $inputMessage.click(function () { $inputMessage.focus(); }); // Socket events // Whenever the server emits 'login', log the login message socket.on('login', function (data) { connected = true; // Display the welcome message var message = "欢迎你来到前端侃大山~"; log(message, { prepend: true }); addParticipantsMessage(data); }); // Whenever the server emits 'new message', update the chat body socket.on('new message', function (data) { addChatMessage(data); }); // Whenever the server emits 'user joined', log it in the chat body socket.on('user joined', function (data) { log(data.username + ' 加入了聊天室'); addParticipantsMessage(data); }); // Whenever the server emits 'user left', log it in the chat body socket.on('user left', function (data) { log(data.username + ' 离开了聊天室'); addParticipantsMessage(data); removeChatTyping(data); }); // Whenever the server emits 'typing', show the typing message socket.on('typing', function (data) { addChatTyping(data); }); // Whenever the server emits 'stop typing', kill the typing message socket.on('stop typing', function (data) { removeChatTyping(data); }); socket.on('disconnect', function () { log('小主,掉线了~'); }); socket.on('reconnect', function () { log('you have been reconnected'); if (username) { socket.emit('add user', username); } }); socket.on('reconnect_error', function () { log('链接服务器失败~'); }); });
你要觉得这篇文章比较好,记得点推荐!