相信看这篇文章的小伙伴们对Websocket协议都有一定的了解了,在这里小弟就不多说废话了,直接上代码了.
后台是node,用的是socket.io模块,先安装一下
npm install socket.io --save
我们新创建一个js文件,名字为socket.js,内容为
// 创建 SocketUtil 模块
class SocketUtil {
constructor(server){
// 接收定义好的 server
this.server = server;
}
connect(){
// 引入socket.io模块,并创建io
var io = require('socket.io').listen(this.server);
io.on('connection', (socket) => {
console.log(123);
// 发送信息到客户端
// socket.emit('nicaiback',{msg:'server'});
// 接收客户端信息并返回
socket.on('nicai', (data) => {
// 客户端数据
console.log(data);
let index = 0;
var timer = setInterval(() => {
if(index >= 10){
clearInterval(timer);
}
var msg = index < 10 ? 'socket 连接成功,一秒给你发一个信息,烦不,哈哈哈' : 'socket 连接成功,不烦你了,拜拜';
// 发送信息到客户端
socket.emit('result', {msg: msg});
index++;
}, 1000);
});
});
}
}
module.exports = SocketUtil;
然后我们在app.js中引入这个模块,加入以下代码:
// 引入socket.js
const SocketUtil = require('./public/utils/socket');
// 创建服务,用于socket连接
var server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('Hello socket!');
res.end();
}).listen(1027, '127.0.0.1');
// 调用socket.js中的方法
const Socket = new SocketUtil(server);
Socket.connect();
客户端相对要简单很多了,引入socket.io,index.html内容如下
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<h1>socket 测试h1>
<button onclick="testSocket()">测试socketbutton>
body>
<script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js">script>
<script>
// 建立连接
var socket = io('http://127.0.0.1:1027');
function testSocket() {
// 发送信息到服务端
socket.emit('nicai', {msg: 1234});
// 接收服务端的信息
socket.on('result', function (er) {
console.log(er);
});
}
script>
html>
至此,一个最简单的socket连接就成功了,如果对小伙伴们有帮助的话,点赞啊,谢谢!
本文纯手打,有不当之处请留言!希望能帮到小伙伴们,谢谢!