这里我用的是node.js来创建服务
这里用node创建服务的话，就需要下载两个模块：
1.express 用来创建http服务
2.express-static 用来设置根目录
const express=require('express');
const static=require('express-static');
let server=express();
/* 创建一个http来接收express创建的http，因为express不能直接被 io 接管 */
let http=require('http').Server(server); /* 这里的http模块是node自带的 */
let io=require('socket.io')(http); /* 用socket来接管http */
http.listen(8081); /* 这里同样要把之前是server换成http（因为服务已经变成http了） */
server.use(static('根目录名字/'));
let aSocket=[];
/* 接收连接 */
io.on('connection',(socket)=>{
aSocket.push(socket); /* 装进数组 */
console.log(socket);
/* 接收前台发来的数据 */
socket.on('send_message',function(name,content){
for(var i=0; i<aSocket.length; i++){
if(aSocket[i]==socket){
/* 查看数据，如果有重复就不发送（跳过此次） */
continue;
}
/* 把数据发送给前台 */
aSocket[i].emit('response_message',name,content);
}
});
});
这里是HTML和js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天窗口</title>
<style>
ul{
width:360px;
height:500px;
border:1px solid #000;
overflow: auto;
}
</style>
<script src="http://localhost:8081/socket.io/socket.io.js"></script>
<script>
/* */
var ws=io.connect('http://localhost:8081'); /* 这里是访问地址 */
window.onload=function(){
var oName=document.getElementById('username');
var oContent=document.getElementById('content');
var oSend=document.getElementById('send');
/* 此处一定要加下标，已经被这不起眼的小问题坑好几次了 */
var oUl=document.getElementsByTagName('ul')[0];
oSend.onclick=function(){
if(oName.value=='' || oContent.value==''){
alert('不能为空');
return;
}
/* 发送数据给后台 */
ws.emit('send_message',oName.value,oContent.value);
var oLi=document.createElement('li');
oLi.innerHTML='<h3>'+oName.value+'</h3><p>'+oContent.value+'</p>';
oUl.appendChild(oLi);
oContent.value='';
};
/* 接收后台发来的数据 */
ws.on('response_message',function(name,content){
var oLi=document.createElement('li');
oLi.innerHTML='<h3>'+name+'</h3><p>'+content+'</p>';
oUl.appendChild(oLi);
oContent.value='';
})
}
</script><!--wanghansheng123-->
</head>
<body>
<div>
<label for="username">昵称：</label>
<input type="text" id="username" >
<br>
<label for="content">内容：</label>
<textarea id="content" cols="30" rows="10"></textarea>
<input type="button" value="发送" id="send">
</div>
<ul>
<!--<li>
<h3>小明</h3>
<p>呵呵！</p>
</li>-->
</ul>
</body>
</html>
网友评论