版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1、了解websocket
1、关于websocket的学习官网：socket.io。
2、websocket是一门前后端交互的通信技术，是HTML5引入的api，主要是为了弥补http协议上的不足之处。
3、websocket可以实现服务端主动给客户端推送消息，有些消息可以通过服务端的广播散播消息。例如web版的即时聊天（IM）工具。
4、websocket还可实现web游戏的开发哦。
5、websocket底层使用的是websocket协议，也是一种b/s通信模式，要是用websocket，前提是存在一个websocket服务器，然后使用客户端的websocket去连接服务器，一旦连接建立起来，服务器就可以向客户端推送消息，客户端也可以向服务端要数据。
6、构建websocket服务器，就必需要引入第三方的库来实现即socket.io
7、websocket是基于http协议的，所以就必须要搭建一个web服务器，这个时候就需要引入一个express模块了
相应的服务网站有：
IM
融云
环信
2、好了，下面是代码实操：
<!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>客户端请求</title>
</head>
<body>
</body>
<script src="https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.js"></script>
<!-- 在客户端的首先第一步，必须先引入socket.io这个库 -->
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
// 在引入这个socket.io这个库的时候，就已经将io()这个全局方法暴露出来
//建立一个有效的url、地址
var url = 'http://localhost:3000';
//客户端请求连接到websocket服务器
var socket = io(url);
//判断是否连接成功
socket.on('connect',()=>{
console.log('connecting....');
});
//监听服务器传送过来的msg事件处理程序
socket.on('msg', function(data){
//拿到数据
console.log(data);
});
</script>
</html>
- 下面是服务端代码：
//由于websocket服务是基于web服务器的http协议的底层，所以需要引入express模块
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/', function(req, res, next) {
res.send('respond with a resource');
});
//开启一个websocket服务
const http = require('http').createServer(app);
//引入socket.io,io监听了一个连接请求，一旦客户端连接到websocket服务器，connection就能够触发
//回调函数就能够执行
const io = require('socket.io')(http);
//推送消息的代码，必须写到触发connection的回调函数中
//其中的socket代表的是当前客户端
io.on('connection', function(socket){
console.log('a user connected');
//服务器主动向客户端推送消息，有字符串msg标识的嵌套字发出事件处理程序
//emit表示给客户端推送信息，
//其中emit的参数1：表示触发推动的事件 参数2：表示的推送的内容
socket.emit('msg',{id:1,username:'程序中一个迷途小书童',title:'幸福大概就是你喜欢粘着的那个人'});
});
var port = 3000;
http.listen(port, ()=>{
console.log('this server is running at ' + port);
});
module.exports = app;
- 这样的话，使用指令nodemon app.js运行的时候，在浏览器中打开http://localhost:3000/chat.html，就能看到以下信息了。
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] starting `node app.js`
this server is running at 3000
a user connected
-在浏览器端打开控制台就可以看到如下服务端给客户端推送的信息