node.js学习笔记 nodejs+express+socket.io实现简单的聊天功能demo

程序修行之路任重而道远

直接上代码哈 ~ ^^ ~

1、目录结构：

在这里插入图片描述

2、在nodejs下面新建一个imServer.js文件

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var mysql = require('mysql');

app.get('/user1', function(request, response){
  response.sendFile(__dirname + '/public/user1.html');
});

app.get('/user2', function(request, response){
  response.sendFile(__dirname + '/public/user2.html');
});

io.on('connection', function(socket){
  socket.on('chatMessage1', function(msg,userId){
    io.emit('chatMessage1', '用户2：' + msg);
    connect(msg,userId);
    console.log('chatMessage1被触发：' + msg +'---ID:'+ userId);
  });
  socket.on('chatMessage2', function(msg,userId){
  	io.emit('chatMessage2', '用户1：' + msg);
  	connect(msg,userId);
  	console.log('chatMessage2被触发：' + msg +'---ID:'+ userId);
  });
});

http.listen(9090);

var pool = mysql.createPool({
	host:'localhost',
	port: 3306,
	database: 'test',
	user :'root',
	password :'root'
})

function connect(msg,userId){
	pool.getConnection(function(err,connection){
		if (err) {
			console.log('与mysql数据库连接失败！')
		}else{
			var insertMsg = 'insert into chat(user_id,content) value (?,?)';
			var chatMsg = [userId,msg];
			connection.query(insertMsg,chatMsg,function(err,result){
			  	if (err) {
					console.log('插入数据失败',err);
				}else{
					console.log('插入数据成功');
					connection.release();
				}
			})
		}
	})
}

3、新建public 在其下面创建 user1.html 和 user2.html

//user1.html文件

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; background-color:rgba(0,0,0,0.4);}
      .box{ width: 700px;height: 500px; position: absolute; border: 1px solid #ccc;
       box-shadow: #ccc 0 0 5px; left: 23%; top:10%; background-color: #fff;}
      .header{ font-size: 15px; padding: 10px; border-bottom: 1px solid #ccc; }
      .box .chatCon { overflow-y: scroll; height: 415px;}
      form { background: #000; padding: 3px; position:absolute; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background:#007aff; color: #fff; border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li{ border-radius: 5px; }
      #me{ float: right; margin: 10px; padding: 5px; background-color: #eee; clear: both;}
      #other{ float: left; margin: 10px; padding: 5px; background-color: #efe666; clear: both;}
    </style>
  </head>
  <body>
    <div class="box">
      <div class="header">IM聊天_1</div>
      <div class="chatCon"><ul id="messages"></ul></div>
      <form action="">
        <input id="m" autocomplete="off" /><button>发送1</button>
      </form>
    </div>
  </body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
<script>
  $(function () {
  
    // 连接服务端
    var socket = io('http://'+ document.domain +':9090');
    $('form').submit(function(){
      socket.emit('chatMessage2', $('#m').val(), 1);
      $('#messages').append("<li id='me'>"+'自己：'+$('#m').val()+"</li>");
       $('.chatCon').scrollTop($('.chatCon')[0].scrollHeight);
      $('#m').val('');
      return false;
    });
    socket.on('chatMessage1', function(msg){
      $('#messages').append("<li id='other'>"+ msg +"</li>");
      $('.chatCon').scrollTop($('.chatCon')[0].scrollHeight);
    });
  });
</script>

//user2.html文件

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; background-color:rgba(0,0,0,0.4);}
      .box{ width: 700px;height: 500px; position: absolute; border: 1px solid #ccc;
       box-shadow: #ccc 0 0 5px; left: 23%; top:10%; background-color: #fff;}
      .header{ font-size: 15px; padding: 10px; border-bottom: 1px solid #ccc; }
      .box .chatCon { overflow-y: scroll; height: 415px;}
      form { background: #000; padding: 3px; position:absolute; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background:#007aff; color: #fff; border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li{ border-radius: 5px; }
      #me{ float: right; margin: 10px; padding: 5px; background-color: #eee;  clear: both;}
      #other{ float: left; margin: 10px; padding: 5px; background-color: #efe666;  clear: both;}
    </style>
  </head>
  <body>
      <div class="box">
        <div class="header">IM聊天_2</div>
        <div class="chatCon"><ul id="messages"></ul></div>
        <form action="">
          <input id="m" autocomplete="off" /><button>发送2</button>
        </form>
    </div>
  </body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
<script>

  $(function () {

    // 连接服务端
    var socket = io('http://'+ document.domain +':9090');
    $('form').submit(function(){
      socket.emit('chatMessage1', $('#m').val(), 2);
      $('#messages').append("<li id='me'>"+'自己：'+$('#m').val() +"</li>");
       $('.chatCon').scrollTop($('.chatCon')[0].scrollHeight);
      $('#m').val('');
      return false;
    });
    socket.on('chatMessage2', function(msg){
      $('#messages').append("<li id='other'>"+ msg +"</li>");
       $('.chatCon').scrollTop($('.chatCon')[0].scrollHeight);
    });
  });
</script>

都创建好后在cmd窗口输入 node imServer 就可以聊天了

----恩简洁粗暴

node.js学习笔记 nodejs+express+socket.io实现简单的聊天功能demo

猜你喜欢