<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Document</title> <style> .caozuo{ position:fixed; bottom:0; left:0; height:100px; background-color:#eee; width:100%; } .caozuo input{ font-size:30px; } .caozuo input[type=text]{ width:100%; } </style> </head> <body> <h1>Edison聊天室<span> 欢迎：<%=yonghuming %></span></h1> <div> <ul></ul> </div> <div> <input type="text"/> <input type="button" value="发言"/> </div> <script src="https://www.jb51.net/socket.io/socket.io.js"></script> <script src="https://www.jb51.net/jquery-1.12.4.min.js"></script> <script> var socket=io(); $('#neirong').keydown(function(e){ if(e.keyCode==13){ //回车发送消息 socket.emit('liaotian',{ 'neirong':$('#neirong').val(), 'ren':$('#yonghu').html(), }); $(this).val(''); } }); /* $("#fayan").click(function(){ //点击发言按钮发送消息 socket.emit('liaotian',{ 'neirong':$('#neirong').val(), 'ren':$('#yonghu').html(), }); });*/ socket.on('liaotian',function(msg){ $(".liebiao").prepend("<li><b>"+msg.ren+": </b>"+msg.neirong+"</li>"); }); </script> </body> </html>
聊天室登陆界面
edison进入聊天室
edison与chan聊天
在码代码过程中，不断的踩坑，填坑，第一次整这玩意，很多地方不熟悉，难免有些错误，毕竟学习过程嘛，有点磕碜，如果你们也写了好使了，咱可以共同进步一起美化，完善更多的功能，忘各位old铁见谅~~~