话不多说！我们直接开搞。
想要快速轻松的搭建一个websocket服务，我们就一定要使用别人封装好的插件了
这里我们使用：socket.io.js
这里随便找了一个下载地址，如果下载不了请自行某度
**
不要着急，一步一步做|文章最后有完整代码
**
下载好之后放在同一个目录下，我们正式开始
jQuery用不用都可以
我们新建一个js文件，随便命名，我这里叫做app.js 当然你也可以命名为server.js
打开app.js
直接复制进去
/*app.js*/
/*构建http服务*/
var app = require('http').createServer()
/*引入socket.io*/
var io = require('socket.io')(app);
/*定义监听端口，可以自定义，端口不要被占用*/
var PORT = 2333;
/*监听端口*/
app.listen(PORT);//端口随意修改，只要不被占用就可以
io.on('connection', function (socket) {
/*所有的监听on，与发送emit都得写在连接里面，包括断开连接*/
})
console.log('服务器启动于 '+PORT+" 端口");
到这里为止，我们的服务器就可以启动了
打开小黑框或者小蓝框，找到我们的js文件，输入 node + js名
正常启动的话就是这个样子
接下来，我们写第一个服务器事件
我们这里只教两种简单的服务器事件，其他的可以自行查看socket.io.js文档
下面我们只使用两种事件
1：socket.on //用来接收客户端发来的事件
2：io.sockets.emit //用来给所有的客户端发送消息
socket.on("login",function(data){//接收两个参数，一个是客户端发来的同名函数，另一个是回调
console.log(data)
//当有客户端执行login的时候，就跟给所有的客户端发送一次事件
io.sockets.emit("playNum",data)//同样接收两个参数，一个是发往客户端的同名事件
//另一个是发过去的数据
})
记住，这些事件都要这个写在里面
io.on('connection', function (socket) {
/*所有的监听on，与发送emit都得写在连接里面，包括断开连接*/
})
——————————————————————————————————————
这样服务器的第一个事件就完成了，现在进入
客户端
，我们进行一个简单的操作
<script type="text/javascript" src="./js/socket.io.js"></script>
引入io.js
/*建立socket连接，使用websocket协议，端口号是服务器端监听端口号*/
var socket = io('ws://locahost:2333');
我们刚刚给服务器添加了一监听‘login’事件的方法
现在让客户端发送一个这样的事件
socket.emit('login',123)//两个参数，第一个是服务器要监听的同名方法
//第二个是参数接受 字符串、对象、数组
客户端发送了login事件，服务器执行login监听，执行了console.log(data)
后台就会打印123了
//123是刚刚传过来的参数
之前我们设定的是服务器接受login之后就给所有的客户端发送一个playNum的事件
现在我们在客户端设置
socket.on('playNum',function(data){
alert(data)
})
到此为止，服务器和客户端简单的发送与接受就完成了
————————————————————————————————————
————————————————————————————————————
以下为完整代码
你要问为什么这个东西功能不全，那是因为我也没做完，只实现了简单的聊天室
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script type="text/javascript" src="./js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="./js/socket.io.js"></script>
<script type="text/javascript" src="client3.js"></script>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="stylesheet" type="text/css" href="ccc.css"/>
</head>
<body>
<div id="box">
<!--登陆用-->
<div id="login-box" class="oldTop">
<div class="userBox">
<input type="text" id="user-inp" placeholder="请输入您的姓名" />
<button id="join-game">加入游戏！</button>
<p>当前人数：<span id="login-box-playerNum"> 0</span>人 </p>
</div>
</div>
<!--登陆用-->
<!--进入游戏-->
<div id="game-box" class="old">
<div id="player-box">
</div>
<div class="max-body">
<div class="body-left">
</div>
<button id="player-ready">准备</button>
</div>
</div>
<div id="game-box-liaot" class="lt-old">
<div id="lt-div">
</div>
<input type="text" id="fs-inp" placeholder="请输入聊天内容" />
<button id="sub">发送！！！</button>
</div>
<!--进入游戏-->
</div>
</body>
</body>
</html>
css
*{
transition: all 0.3s;
}
#box{
width: 100%;
height: 100%;
background: #eee;
padding: 50px;
box-sizing: border-box;
}
.box{
width: 100px;
height: 100px;
}
.userBox{
width: 80%;
margin: 0 auto;
height: 300px;
border-radius: 10px;
border: 1px solid orange;
box-shadow: 0 0 10px 1px orangered;
padding: 20px;
box-sizing: border-box;
}
#user-inp{
border: 0;
width: 100%;
height: 80px;
padding-left: 10px;
box-sizing: border-box;
border-radius:5px;
margin-bottom: 20px;
}
#login-box{
transition: all .5s;
overflow: hidden;
}
.oldTop{
width: 100%;
height: 400px;
}
.newTop{
width: 0%;
height: 400px;
}
#join-game{
width: 100%;
height: 50px;
}
#game-box{
border: 1px solid deepskyblue;
border-radius: 5px;
box-shadow: 0 0 10px 1px dodgerblue;
margin: 0 auto;
position: absolute;
top: 5%;
left: 5%;
transition: all .5s;
overflow: hidden;
display: flex;
flex-direction: column;
}
.old{
width: 0;
height: 90%;
}
.new{
width: 1000px;
height: 90%;
}
.lt-old{
width: 0;
height: 90%;
position: absolute;
right: 5%;
top: 5%;
border: 1px solid orangered;
border-radius: 5px;
box-shadow: 0 0 10px 1px orange;
}
.lt-new{
width: 300px;
height: 90%;
position: absolute;
right: 5%;
top: 5%;
border: 1px solid orangered;
border-radius: 5px;
box-shadow: 0 0 10px 1px orange;
}
#game-box-liaot{
position: absolute;
right: 5%;
top: 5%;
overflow: hidden;
}
#lt-div{
margin: 0 auto;
width: 90%;
height: 80%;
padding: 20px;
box-sizing: border-box;
}
#fs-inp{
width: 90%;
margin: 0 auto;
display: block;
border-radius: 5px;
height: 30px;
}
#sub{
width: 90%;
display: block;
margin: 10px auto;
}
#player-box{
height: 50px;
width: 100%;
overflow: hidden;
background: black;
color: white;
border-radius: 5px;
}
.one-player-box{
float: left;
width: 80px;
text-align: center;
border: 1px solid white;
border-radius: 5px;
}
.max-body{
width: 100%;
flex: 1;
}
#player-ready{
position: absolute;
width: 400px;
height: 100px;
}
客户端js
//new 一个 websocket实例
$(function(){
/*建立socket连接，使用websocket协议，端口号是服务器端监听端口号*/
var socket = io('ws://169.254.25.138:2333');
/*定义用户名*/
var iPlayNum = 0;//目前所有用户的数量
var sIndPlayer=null
var oAllPlayerArr=[]//所有用户的数组
var bReady=false//当前用户准备状态
socket.emit('look',"给我康康")
//加入房间
$("#join-game").on("click",function(){
if($("#user-inp").val()){
socket.emit('login',{"username":$("#user-inp").val(),"ready":bReady})
$("#login-box").attr('class','newTop')
sIndPlayer=$("#user-inp").val()
setTimeout(function(){ $("#login-box").hide()},500)
$("#game-box").attr('class','new')
$("#game-box-liaot").attr('class','lt-new')
}else{
alert("请输入名称")
}
})
//接受一个其他玩家登陆的事件
socket.on('playNum',function(data){
iplayNum=data.length
$("#login-box-playerNum").html(iplayNum)
oAllPlayerArr=data
console.log(oAllPlayerArr,"当前玩家数据")
var str = "<div class='one-player-box'>目前房间人数:</div>"
for(var i = 0;i<oAllPlayerArr.length;i++){
str += "<div class='one-player-box'>"+oAllPlayerArr[i].username +"</div>"
}
$("#player-box").html(str)
})
//发送系统消息
socket.on("system",function(data){
console.log(data)
$("#lt-div").prepend("<p>"+data+"</p>");
})
//
$("#sub").on("click",function(){
sIndPlayer = $("#user-inp").val()
let str = `${sIndPlayer} 说 : ${$("#fs-inp").val()}`
$("#fs-inp").val('')
socket.emit('submsg',str)
})
$("#player-ready").on("click",function(){
bReady=!bReady
socket.emit("ready",[sIndPlayer,bReady])
$("#player-ready").hide()
})
socket.on("systemCall",function(res){
console.log(res)
})
})
app.js
/*app.js*/
/*构建http服务*/
var app = require('http').createServer()
/*引入socket.io*/
var io = require('socket.io')(app);
/*定义监听端口，可以自定义，端口不要被占用*/
var PORT = 2333;
/*监听端口*/
app.listen(PORT);
//以下为服务器用到的数据
var oAllPlayer=[]//所有用户的信息数组
var iPlayerNums=0//当前用户人数
var iReadyNum=0//准备人数
io.on('connection', function (socket) {
/*所有的监听on，与发送emit都得写在连接里面，包括断开连接*/
socket.on('login',function(data){
console.log(data.username+"加入了游戏")
let k=data
k.uid=iPlayerNums++
oAllPlayer.push(k)
//加入游戏人数
io.sockets.emit("playNum",oAllPlayer)
console.log("当前在线人数："+oAllPlayer.length)
})
socket.on("look",function(data){
io.sockets.emit("playNum",oAllPlayer)
})
socket.on("submsg",function(data){
io.sockets.emit("system",data)
})
//准备事件
socket.on("ready",function(data){
io.sockets.emit("systemCall",data[0]+"已经"+data[1])
console.log(data[0]+'准备完毕')
for(let k = 0 ; k<oAllPlayer.length;k++){
if(oAllPlayer[k].username==data[0]){
oAllPlayer[k].ready=data[1]
iReadyNum++
}
}
io.sockets.emit("playNum",oAllPlayer)
if(iReadyNum==oAllPlayer.length){
Go()
}
})
})
function Go(){
console.log("比赛开始")
}
console.log('服务器启动于 '+PORT+" 端口");
扫一扫
759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
