前端与后台交互之websocket

1、了解websocket

1、关于websocket的学习官网:https://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:https://cloud.tencent.com/product/im
融云:https://www.rongcloud.cn/?utm_source=baiduBrand&utm_term=rongyun
环信:https://www.easemob.com/

2、好了,下面是代码实操:




    
    
    
    客户端请求



    

    
    

-下面是服务端代码:

  //由于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

-在浏览器端打开控制台就可以看到如下服务端给客户端推送的信息


image.png

-好了,9527,要去继续学习新的知识点咯。毕竟我也是一个程序中迷途的小书童嘛!嘻嘻

你可能感兴趣的:(前端与后台交互之websocket)