实例介绍
【实例简介】
【实例截图】
【核心代码】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <!doctype html> < html > < head > < title >Socket.IO chat</ title > < link rel = "stylesheet" type = "text/css" href = "/static/style.css" > </ head > < body > < div id = "page" > < div id = "login" > Please enter your name < br /> < input type = "text" id = "clientNameText" > < button id = "loginBtn" >login</ button > < div id = "error" class = "hidden-div" >Invalid client name!</ div > </ div > < div id = "chat" class = "hidden-div" > < div id = "nav" > Welcome, < span id = "clientNameSpan" ></ span > < a id = "logoutBtn" >< em >logout</ em ></ a > </ div > < div id = "clientStatus" > < span id = "clientCount" ></ span > < div id = "clients" ></ div > </ div > < div id = "inbox" ></ div > < div id = "input" > < input id = "message" style = "width:730px" /> < button id = "sendMsgBtn" type = "button" >send</ button > </ div > </ div > </ div > < script src = "/static/jquery-1.11.3.js" ></ script > <!--[if IE 7]> <script src="/static/json2.js"></script> <![endif]--> < script src = "/socket.io/socket.io.js" ></ script > < script > var socket; $(function(){ $("#loginBtn").click(function(){ login(); }); $("#logoutBtn").click(function(){ logout(); }); $("#sendMsgBtn").click(function() { sendMessage() }); $("#message").bind("keypress", function(e) { if(e.keyCode==13){ sendMessage() } }); }) function sendMessage(){ socket.emit("new_message", "{'sender':'" $("#clientNameSpan").text() "', 'msg':'" $("#message").val() "'}"); $("#message").val(""); } function login(){ var username = $.trim($("#clientNameText").val()); if(username == ""){ $("#error").removeClass("hidden-div"); return; } $("#clientNameSpan").text($.trim($("#clientNameText").val())); $("#login").addClass("hidden-div"); $("#chat").removeClass("hidden-div"); initSocket(); } function logout(){ // close client socket when logout socket.disconnect(); $("#login").removeClass("hidden-div"); $("#chat").addClass("hidden-div") $("#error").addClass("hidden-div"); $("#clientNameText").val(""); $("#inbox").children().remove(); } function initSocket(){ socket = io("http://" location.host); socket.emit("add_client", $("#clientNameSpan").text()); socket.on("new_message", function(data){ console.log(data); data = eval("(" data ")"); if (data.sender == $("#clientNameSpan").text()){ $("#inbox").append("< div class = 'chatItemS' >< span class = 'msg mSend' >< span class = 'sender' >" data.sender ": </ span >" data.msg "</ span ></ div >"); } else { $("#inbox").append("< div class = 'chatItemR' >< span class = 'msg mRecv' >< span class = 'sender' >" data.sender ": </ span >" data.msg "</ span ></ div >"); } $("#inbox").scrollTop($("#inbox")[0].scrollHeight); }); socket.on("user_status", function(data){ $("#clientCount").text("Online User: " data.length); $("#clients").children().remove(); for(var i = 0; i< data.length ; i ){ $("#clients").append("<span id = 'client' >" data[i]["clientName"] "</ span >") } }) } </ script > </ body > </ html > |
nodejs socket.io 在线聊天示例源码(兼容IE7、IE8、IE9、IE10、IE11、chrome、firefox、等几乎所有浏览器)
好例子网口号:伸出你的我的手 — 分享!
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论