WebSocket(socket.io + node.js)聊天室

记录项目：

制作一个基于socket.io和node.js的聊天室

socket.io的api用法详细看https://socket.io/

前端效果显示：

1.登录界面

2.群聊页面

3.私聊页面

前端页面分三个盒子1.登录盒子2.群聊盒子3.私聊盒子

逻辑：登录username作为唯一标识，在登录时用户名设置为不允许重复；登录成功登录盒子display:none,群聊盒子display:block;左侧用户栏点击私聊人头像将私聊盒子打开，群聊盒子隐藏；再次点击就回到群聊盒子

 

服务端骨架

app.js(本文件是服务器端代码)

1.安装所需依赖（express快速开发node.js骨架，socket.io用于项目socket通信）

npm install express 

npm install socket.io

2.先在app.js将依赖码上

3.目录文件与路径

登录部分（socket）

客户端利用socket.emit将用户名和头像发送至服务器，服务器判断是送来的用户名是否已经被注册，没被注册则登陆成功,利用io.emit将用户的基本信息以及用户列表广播给客户端。

客户端收到数据则可以将数据渲染出来，功能可以实现某某某加入了聊天室的提示信息，以及侧边栏用户的展现

服务端app.js

客户端index.js

//监听用户加入信息
socket.on('addUser' , data => {
	$('.box-bd').append(`
	

	  

	    ${data.username}加入了群聊
	  
	
	`
	)
	scrollIntoView();
})

//侧边栏用户及聊天室人数
socket.on('userList' , data => {
	$('.user-list ul').html('');
	$('.box #chatName').html('');
	
	data.forEach(item => {	
		$('.user-list ul').append(`
		

		  

		  
${item.username}
		
		`)	
	})
	$('.box #chatName').append(`
	
ChatRoom(${data.length})
	`)
})

 

 

2.聊天信息，图片，文件部分发送

服务端app.js

服务端在处理聊天信息部分单纯具备接收某一个客户端发来的信息并且将信息广播至所有客户端

index.js客户端

在聊天部分准备工作是先准备两个不同的聊天输出框，一个是自己发的信息一个是别人发的。只需判断发送信息的username是不是===登录进来的username就可以判断是否为自己发的信息。

	
//聊天功能
$('.box .btn-send').on('click' , () => {
	//获取到聊天内容
	var content = $('.box #content').html();
	$('.box #content').html('')
	if(!content)return alert('请输入内容');
	
	
	//发送给服务器
	socket.emit('sendMessage',{
		msg:content,
		username:username,
		avatar:avatar
	})
	
})
//接收文字信息
socket.on('receiveMessage' , data  => {
	
	
	if(data.username === username){
		$('.box .box-bd').append(`
		

		  

		    
		    

		      

		        
${data.msg}
		      
		    
		  
		
		`)
	}else{
		$('.box .box-bd').append(`
		

		  

		    
		    
${data.username}
		    

		      

		        
${data.msg}
		      
		    
		  
		
 
		`)
	}

	scrollIntoView();
})


//发送图片
$('.box #picture').on('change' , function(){
	
	var file = this.files[0];
	var fr = new FileReader()
	fr.readAsDataURL(file)

	fr.onload = function(){
		socket.emit('sendImage',{
			username : username,
			avatar : avatar,
			img:fr.result
		})
	}
})

//接收图片信息
socket.on('receiveImage' , data  => {
	if(data.username === username){
		$('.box .box-bd').append(`
		

		  

		    
		    

		      

		        

						
						
		      
		    
		  
		
		`)
	}else{
		$('.box .box-bd').append(`
		

		  

		    
		    
${data.username}
		    

		      

		        

						
						
		      
		    
		  
		
 
		`)
	}
	$('.box .box-bd img:last').on('load',function(){
		scrollIntoView();
	})
	
})



//发送压缩文件
 $('.box #file').on('change', function(){
    //获取文件列表对象
    var fileList = $('.box #file')[0].files;
    //创建文件流获取文件地址
    var src = window.URL.createObjectURL(fileList[0]); 　　
	 
			socket.emit('sendZip',{
				username : username,
				avatar : avatar,
				src:src,
				name:	fileList[0].name
			})
　});

socket.on('receiveZip' , data => {
	
	if(data.username === username){
		$('.box .box-bd').append(`
		

		  

		    
		    

		      

		        

					

					

					${data.name}
					
					

					
					
		      
	
		    
		  
		
		`)
	}else{
		$('.box .box-bd').append(`
		

		  

		    
		    
${data.username}
		    

		      

		        

							 

							 
${data.name}
							 

							 
							 
						
		      
		    
		  
		
 
		`)
	}
	
	scrollIntoView();
})

 

 

私聊

我滴思路：先准备一个与群聊一样的私聊窗口，在左侧用户侧边栏渲染时就每个li绑定一个onclick事件，在这个事件中，将所点击的li中的用户名和头像获取到，方便在私聊窗口把基础信息渲染到私聊页面上。

信息发送在服务端依旧为广播形式，但客户端接收信息要做判断。代码部分基本与群聊一致，但客户端发送信息得多私聊的对象用户名以及私聊对象头像,方便后面信息接收判断以及里聊天信息渲染

如：

	socket.emit('sendSingleMessage',{
				username : username,
				avatar : avatar ,
				msg:content,
				click_ava:click_ava,
				click_username:click_username
			})

 

 

聊天记录

思路：用的是localstorage保存数据，每一个用户发送的信息都用对象数组保存，最后将对象数组以队列或者栈的数据结构存储，此做法能够保证多个用户信息出来的依次顺序。

信息存储好后，在登录成功时就把信息渲染出来。