因为项目原因需要使用websocket这种全双工的通信方式,但是在后端服务器还没搭建好的情况下,就只能自己搭建一个测试服务器,下面我将一步步的列举单间过程;
开发工具:webstorm
1.服务端
第一步:新建一个项目文件夹,打开webstorm,进入该项目文件夹,我所建的文件及名称为websoket,所以在控制台显示的路径如下:
第二步:在当前目录下生成一个package.json文件
执行如下命令
npm init
第三步: 接下来使用npm
命令安装express
和socket.io
1 2 |
|
安装成功后,应该可以看到工作目录下生成了一个名为node_modules
的文件夹,里面分别是express
和socket.io
,接下来可以开始编写服务端的代码了。
第四步:新建一个index.js文件
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.send('<h1>Welcome Realtime Server</h1>');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
第五步:在控制台运行如下命令,启动服务
node index
完成以上步骤,简单的服务端架搭建好了;接下来完成客户端
2.客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload = function () {
var ws = new WebSocket('ws://localhost:3000');
ws.onopen = function (e) {
console.log("连接服务器成功");
ws.send("game1");
}
}
</script>
</body>
</html>
以上就是全部步骤,我所搭建的客户端和服务端都比较简单,目的就是为了走一遍完整流程,如果还需要其他功能,可自行添加。