莱芜市网站建设公司,网站建设公司怎么拉单,无锡做网站选优易信,商业网站有什么作用首先我们可以先做一个简单的例子来学习一下简单的websocket模拟聊天对话的功能
原理很简单#xff0c;有点像VUE中的EventBus#xff0c;用emit和on传来传去
首先我们可以先去自己去用node搭建一个本地服务器
步骤如下
1.新建一个app.js#xff0c;然后创建pagejson.js文…首先我们可以先做一个简单的例子来学习一下简单的websocket模拟聊天对话的功能
原理很简单有点像VUE中的EventBus用emit和on传来传去
首先我们可以先去自己去用node搭建一个本地服务器
步骤如下
1.新建一个app.js然后创建pagejson.js文件输入以下指令 npm init -y 2.下载 express包 pnpm i express 3.在app.js里面去进行导包创建express实例 const expressrequire(express)
const appexpress()
app.get(/,(req,res){res.send(1111)
})
app.listen(2000,(){console.log(http://127.0.0.1:2000);
})
4.重启服务器我们可以利用postman或者其他调试接口的工具去看是否接收到了数据
注意这个上面的ip地址要写自己本机的ip,可以在小黑窗中输入 ipconfig 获取自己的ip 5.下载socket.io包 pnpm i socket.io 6.在app.js里面导包
const expressrequire(express)
const appexpress()
// app.get(/,(req,res){
// res.send(1111)
// })
const http require(http).createServer(app)
const io require(socket.io)(http, { cors: true }) //创建了一个websocket服务器 并且解决了跨域
io.on(connection, (socket) {// 客户端链接成功console.log(~connection~)})
// 客户端那边传过来的事件接收
// 注意这个地方之前的app改为http
http.listen(2000,192.168.72.80,(){console.log(http://192.168.72.80:2000);
}) 搭建完毕后可以去创建两个html文件
然后去做实时通信 服务器里面去接收自定义事件 然后再通过io里面的emit方法给另外一个页面发送自定义事件然后用socket.on去接收自定义事件代码放在下面里面的ip改成自己的就可以实现模拟聊天功能
app.js
const expressrequire(express)
const appexpress()
// app.get(/,(req,res){
// res.send(1111)
// })
const http require(http).createServer(app)
const io require(socket.io)(http, { cors: true }) //创建了一个websocket服务器 并且解决了跨域
io.on(connection, (socket) {// 客户端链接成功console.log(~connection~)// jack给rose发socket.on(handeljack,(e){console.log(handeljack,e);io.emit(messageRose,e)})// rose给Jack发socket.on(handelrose,(e){console.log(handelrose,e);io.emit(messageJack,e)})
})
// 客户端那边传过来的事件接收http.listen(2000,192.168.72.80,(){console.log(http://192.168.72.80:2000);
})
1.jack.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlejack/titlescript srchttps://cdn.socket.io/4.4.0/socket.io.min.js/script
/headbodyul/ulinput typetext name idipt placeholder请输入内容button idbtn点击发消息给rose/buttonscriptconst btn document.querySelector(#btn)const ipt document.querySelector(#ipt)const box document.querySelector(ul)/* 监听connect事件 */const socket io(http://192.168.72.80:2000);socket.on(connect, () {console.log(看到这里表示和服务器连接上了)})const list []socket.on(messageJack, (e) {console.log(e);var str list.push(e)list.forEach(item{strli${item}/li})box.innerHTMLstr})btn.onclickfunction(){console.log(111);socket.emit(handeljack,ipt.value)}/script
/body/html
2.rose.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlerose/titlescript srchttps://cdn.socket.io/4.4.0/socket.io.min.js/script
/headbodyulli1111/li/ulinput typetext name idipt placeholder请输入内容button idbtn点击发消息给Jack/buttonscriptconst btn document.querySelector(#btn)const ipt document.querySelector(#ipt)const box document.querySelector(ul)/* 监听connect事件 */const socket io(http://192.168.72.80:2000);socket.on(connect, () {console.log(看到这里表示和服务器连接上了)})const list []socket.on(messageRose, (e) {console.log(e);var str list.push(e)list.forEach(item{strli${item}/li})box.innerHTMLstr})btn.onclick function () {console.log(111);socket.emit(handelrose, ipt.value)}/script
/body/html
