实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE html> <html class="chathtml"> <!-- 下载nodejs-websocket https://github.com/sitegui/nodejs-websocket npm install nodejs-websocket 但是报错了,说是缺少package.json 所以: 1、npm init 创建package.json 2、sudo npm install nodejs-websocket 就可以了 3、创建一个wsServer.js 是服务器文件 4、服务器端的代码可以先看https://github.com/sitegui/nodejs-websocket 上面的使用方法。 5、启动服务、node wsServer.js --> <head> <meta charset="utf-8" /> <title>Webscoket</title> <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <!-- echo 把接受到的数据返回过去 --> <body class="chatbody"> <!-- 导航 --> <div class="navigation"> <h1>聊天界面</h1> <a href="javascript:history.go(-1);" id="back">返回</a> </div> <!-- 会话列表 --> <div class="chatDiv"> <div id="entername"></div> <ul id="chatlist"> </ul> </div> <!-- 发送消息的输入框和按钮 --> <div class="sendMessage"> <input id="sendText" type="text" /> <button id="sendBtn">发送</button> </div> <script type="text/javascript"> // 第一步 检测是否支持websocket 如果支持就创建websocket var websocket = null; var user = {}; if ('WebSocket' in window) { websocket = new WebSocket("ws://localhost:3000/"); } else { alert('当前浏览器不支持websocket') } // 创建节点 function createChatNode(obj, ismine) { var $li = ''; $li = document.createElement('li'); if (ismine == true) { $li.setAttribute("class", "mine"); } else { $li.setAttribute("class", "other"); } var $dataspan = document.createElement('span'); var $data = document.createTextNode(obj.data); $dataspan.appendChild($data); var $namespan = document.createElement('span'); var $name = ''; if (ismine == true) { $name = document.createTextNode(':我'); } else { $name = document.createTextNode(obj.name ':'); } $namespan.appendChild($name); $li.appendChild($dataspan); $li.appendChild($namespan); var $list = document.getElementById('chatlist'); $list.appendChild($li); } // 接受到的信息的展示 function showMessage(obj) { var div = document.getElementById('entername'); // 如果接受到的消息中群聊的id不是空的,并且这个群聊和当前我所在的群是一致的,那么我们就是在一个群里 if (obj.groupnumber != undefined && obj.groupnumber == user.group) { if (user.name == obj.name) { // 这里说明是自己发的消息 if (obj.data == undefined) { return; } createChatNode(obj, true); } else { // 是好友发送的消息 createChatNode(obj, false); } } else { // 如果不是群聊的是时候 if (user.name == obj.name) { // 自己发送的消息 if (obj.data == undefined) { return; } createChatNode(obj, true); } else { // 好有发送的消息,这里的判断是要判断要发送的是人是不是给我的 if (obj.toname == user.name) { createChatNode(obj, false); } } } } // 进入会话的人的信息 // 连接成功建立的回调方法 websocket.onopen = function(e) { // 建立连接后,要根据页面的url得知发起会话的人是想给谁发,或者在那个群里发 var url = window.location.href; var splitobj = spliturl(url); user.name = splitobj.username; user.group = splitobj.groupnumber; if (user.group == undefined) { user.lineType = 1; //单聊 } else { user.lineType = 0; //群聊 } user.type = "enter"; user.toname = splitobj.toname; websocket.send(JSON.stringify(user)); // 这里是把发起会话的人的信息告诉服务器 // 发送消息 document.getElementById("sendBtn").onclick = function() { var txt = document.getElementById("sendText").value; document.getElementById('sendText').value = ''; if (txt) { user.type = "message"; user.data = txt; websocket.send(JSON.stringify(user)); } } } // 查分字符串 function spliturl(url) { var obj = {}; var array = url.split('name='); if (array[1].indexOf('&group=') > -1) { //如果包含group 说明是群聊 var group = array[1].split('&group='); obj.groupnumber = group[1]; obj.username = group[0]; } else { if (array[1].indexOf('&to=') > -1) { var toArray = array[1].split('&to='); obj.username = toArray[0]; obj.toname = toArray[1]; } else { obj.username = array[1]; } } return obj; } //接收到消息的回调方法 websocket.onmessage = function(e) { // if (e == '好友在忙碌') { // console.log('e', e); // websocket.close(); // return; // } var mes = JSON.parse(e.data); showMessage(mes); } //连接关闭的回调方法 websocket.onclose = function() { console.log("websocket close"); } //连接发生错误的回调方法 websocket.onerror = function() { alert("Webscoket连接发生错误"); } //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function() { websocket.close(); } </script> </body> </html>
好例子网口号:伸出你的我的手 — 分享!
相关软件
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论