在线游戏,实时通讯都需要用到websocket技术.
其中搭建websocket最方便的就是nodejs,node的高并发,js的单线程,异步处理的优势无限放大.
socket.io是基于nodeJS的websocket的socket开发框架.相对原生websocket的优势在于他的浏览器兼容性以及封装输出统一性.
源码下载:socket.io搭建源码
在这里吐槽一下杭州的电信,github访问速度超慢,动不动直接封死.连我连接的SSR服务器也经常封住...
(无限流量套餐的可以用4G无线连,一般4G都是不封的)
服务器端socket.io搭建
首先下载socket.io, 客户端代码也可以放同一个服务器端口下,可以下载express搭建一个node静态网页服务器
npm init -y
npm install --save socket.io
npm install --save express
然后新建一个index.js,写入内容
const express = require('express');
const path = require('path');
let app = express();
const http = require('http').Server(app);
let io = require('socket.io')(http);
//搭建静态客户端页面.
app.use(express.static(path.join(__dirname, 'statics')));
//=================socket==========================
io.on('connection', socket => {
console.log('a user connected:' + socket.id);
});
http.listen(3000, () => {
console.log('服务已启动,http://localhost:3000');
});
然后在控制台中运行node index.js
当看到控制台中跳出"服务已启动,http://localhost:3000"字样后,就说明服务器已经成功启动了.
客户端socket.io搭建
首先建一个文件夹,专门存放静态页面(个人习惯叫做statics,如果文件夹不叫这个名字的话注意要修改服务器的对应路径:app.use(express.static(path.join(__dirname, 'statics')));)
新建一个index.html的首页.
<!DOCTYPE html>
<html lang="en">
<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>socket.io test</title>
</head>
<body>
<div id='message'>
</div>
</body>
<!-- 也可以把js下载下来存放在自己的服务器上 -->
<!-- <script src="https://cdn.bootcss.com/socket.io/2.0.4/socket.io.js"></script> -->
<script src="https://cdn.bootcss.com/socket.io/2.0.4/socket.io.slim.js"></script>
<script src="index.js"></script>
</html>
然后再新建一个index.js
var socket = io(); //只要这一句就可以连接了.
//socket连接成功事件
socket.on('connect',function(){
appendText("连接成功 " + socket.id);
});
//追加文字到html页面上
function appendText(strText){
var p = document.createElement("p");
p.innerText = strText;
document.getElementById("message").appendChild(p);
}
然后用浏览器访问http://localhost:3000/就可以看到链接成功的输出了.
通过webpack搭建socket.io客户端.
用 webpack搭建socket.io客户端框架的话尽量不要和服务器端的放一起,不方便开发以及调试,当然打完包后还是可以放在服务器端目录下面的
附上我的测试代码的package.json
...
"scripts": {
"build": "webpack --config ./webpack.config.js --env production",
"start": "webpack-dev-server --config ./webpack.config.dev.js --env development --open"
},
"devDependencies": {
"clean-webpack-plugin": "^0.1.18",
"html-webpack-plugin": "^2.30.1",
"uglifyjs-webpack-plugin": "^1.2.2",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"socket.io-client": "^2.0.4"
}
...
首先在根目录新建入口模板页面 index.impl.html
<!DOCTYPE html>
<html lang="zh-CN">
<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>socket.io client</title>
</head>
<body>
<h1>socket client</h1>
<div id="message"></div>
</body>
<!-- 通过cdn引用socket.io -->
<script src="https://cdn.bootcss.com/socket.io/2.0.4/socket.io.slim.js"></script>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.index.entry%>"></script>
</html>
新建一个lib文件夹,专门用来存放需要打包的文件
./lib/config.js (配置文件)
let config = {
socketUrl: 'http://localhost:3000' , //socket.io 服务器路径.
};
export { config as default };
./lib/index.js
import config from './config';
//import io from 'socket.io-client'; //也可以把socket.io和自己的代码打包在一起.
const socket = io(config.socketUrl);
socket.on('connect',()=>{
console.log('connect ' + socket.id);
appendText("连接成功 " + socket.id);
});
//追加文字到html页面上
function appendText(strText){
var p = document.createElement("p");
p.innerText = strText;
document.getElementById("message").appendChild(p);
}
再新建一个webpack.config.dev.js (开发专用的config)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
devtool: 'eval-source-map',
devServer: {
host: process.env.HOST,
port: 8080,
inline: true,
//historyApiFallback: true,
// overlay: {
// errors: true,
// warnings: true
// }
//hotOnly:true
},
entry: {
index: './lib/index.js'
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name]-[hash].js'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.impl.html',
inject: false
}),
]
};
发布正式webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin'); //html模板插件
const CleanWebpackPlugin = require("clean-webpack-plugin"); //清除历史打包文件
const Uglify = require('uglifyjs-webpack-plugin'); //压缩js代码
const path = require('path');
module.exports = {
entry: {
index: './lib/index.js'
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name]-[hash].js'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.impl.html',
inject: false
}),
new CleanWebpackPlugin('./dist/*.*', {
root: __dirname,
verbose: true,
dry: false
}),
new Uglify(), //压缩js代码
]
};
npm install
npm start //启动调试
npm run build //打包文件
当浏览器自动打开 http://localhost:8080/ 则说明框架搭建成功
(注意服务端程序不要停止,否则连接不上)
