在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的头,进行构建websocket。虽然代码短,但可以很好地体现websocket的原理。
,这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道。但是并不是所有的浏览器都支持websocket特性,故为了磨平浏览器间的差异,为开发者提供统一的接口,引入了socket . io模块。在不支持websoket的浏览器中,套接字。io可以降级为其他的通信方式,比如有AJAX长轮询,JSONP轮询等。
模块安装
新建一个package.json文件,在文件中写入如下内容:
{
“名称”:“socketiochatroom”,
“版本”:“0.0.1”,
“依赖”:{
"套接字。io”:“*”,
“表达”:“*”
}
}
npm安装
执行完这句,节点将会从npm处下载socket . io和表达模块。
-
在文件夹中添加index.js文件,并在文件中写入如下内容:
/* *
*由竹>
节点index.js
输出
听3000
此时在浏览器中打开localhost: 3000会得到这样的结果:
原因是在代码中只对路由进行了如下设置
app.get(“/?函数(点播,res) {
“使用严格的”;
res.end (“& lt; h2>插座server”)
});
服务器端主要是提供socketio服务,并没有设置路由。
<强>客户端的实现
在客户端建立如下的目录和文件,其中json3.min.js可以从网上下载到。
客户
——客户端。js
——指数。html
————json3.min。js
- - - - - - - - style.css
在index . html中
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元名称=癴ormat-detection”内容=暗缁?不”/比;
& lt;元name=癴ormat-detection”内容=坝始?不”/比;
& lt; title> 1301群聊& lt;/title>
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/style.css "/比;
& lt;脚本src=" http://realtime.plhwin.com: 3000/socket . io/socket.io.js”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/json3.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=發oginbox”比;
& lt; div比;
输入你在群聊中的昵称
& lt; br/比;
& lt; br/比;
& lt;输入类型=拔谋尽闭嘉环?扒胧淙胗没? id="用户名" name="用户名"/比;
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/提交”/比;
& lt;/div>
& lt;/div>
& lt; div id=癱hatbox”比;
& lt; div比;
& lt; div比;
& lt;跨度在1301群聊& lt;/span>
& lt;跨度祝辞& lt;跨度id=皊howUserName”祝辞& lt;/span> |
& lt; a href=" javascript:;在退出& lt;/a> & lt;/span>
& lt;/div>
& lt;/div>
& lt; div id=耙缴痹?
& lt; div id=傲奶臁北?
& lt; div id=跋ⅰ眂lass=跋ⅰ北?
& lt; div id=" onLineCounts "
比;
& lt;/div>
& lt;/div>
& lt; div类=笆淙肟颉北?
& lt; div类="输入"比;
& lt;输入类型=拔谋尽弊畲蟪ざ?" 140 "占位符=笆淙肓奶炷谌? id=澳谌荨钡拿?澳谌荨北?
& lt;/div>
& lt; div类=靶卸北?
& lt;按钮类型="按钮" id=" mjr_send祝辞提交& lt;/button>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/client.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
在client.js中
/* *
*由bamboo>”;
html +=user.userName;
html +=(action===暗锹肌?& # 63;“加入了群聊”:“退出了群聊”;
html +=& lt;/div>;
var=d.createElement节(“节”);
部分。className='系统J-mjrlinkWrap J-cutMsg ';
部分。innerHTML=html;
this.msgObj.appendChild(部分);
this.scrollToBottom ();
}，/*用户提交用户名后,将loginbox设置为不显示,将chatbox设置为显示*/userNameSubmit:函数(){
var用户名=d.getElementById value(“用户名”);
如果用户名!=" {
d.getElementById(“用户名”).valuehttps://www.yisu.com/zixun/=?
d.getElementById .style (“loginbox”)。显示='没有';
d.getElementById .style (“chatbox”)。显示=翱椤?
this.init(用户名);//调用初始化方法
}
返回错误;
}，//用户初始化
初始化:函数(用户名){//随机数生成的uid
这一点。用户id=this.genUid ();
这一点。用户名=用户名;
d.getElementById (“showUserName”)。innerHTML=this.userName;//緉ewpidian】|【退出)
this.scrollToBottom ();//连接socketIO服务器,newpidian的IP地址
这一点。套接字=io.connect (“192.168.3.155:3000”);//向服务器发送某用户已经登录了
this.socket。发出('登录',{userId:这。用户id、用户名:this.userName});//监听来自服务器的登录,即在客户端插座。发出(“登录”)发送后,客户端就会收到来自服务器的//io。排放(“登录”,{onLineUsers: alt="基于Nodejs利用socket . io实现多人聊天室">
