此文内容都是刚接触socket.on两天写给自己稍作小结的,可能初学者看了有点讨论交流的帮助,要严谨学的还是绕过吧,毕竟这个主要给自己看的hh。
这段时间PC端项目要实现聊天室功能,大佬们早实现过了觉得不难,就把活扔给我了,初步想用egg.js+React实现试试,结果处处是坑。
跟着egg.js官方文档里的egg-socket.io代码和网上各种文章打了三遍,根本跑不通好吧(读文档能力差这个人设我认了),捉摸了一天都没搞好,我就想先上手了解一下socket.io怎么连demo都不给我实现,然后各种碰壁各种想办法,最后把socket.io官方文档demo git clone 下来改了改玩。
嗯,es5语法,jquery,基本忘了怎么写但还看得懂。
前端:
发送消息:搞个form表单(多久没用了?),运行一个函数里面包括 { socket.emit(a,b):其中a为对应socket.on匹配的字符串,b为传的data ,运行完后return 个false ,换成true后form表单提交后刷新页面聊天记录就没了,所以这个false的作用是防止form表单刷新 }然后试了试用button不用form,不返回false也能用,莫名感觉舒服多了。。。(玩php的时候就不喜欢form表单。。。),socket.emit后面还可以跟回调函数,调用后在后端对应的socket.on中可以回调些操作,暂时没用到它。
接收消息:socket.on(a,b):a还是字符串,用来接收并处理对应值传来的消息,b是传过去的data
后端:
创建连接:io.on('connection',()=>{balabala}),balabala里存放socket.on等函数
断开连接:socket.on('disconnect',()=>{lalala})在balabala里,lalala是断开连接时执行的函数
再玩了一下大概了解了socket.io客户端和服务器交互操作流程:
(1)先用http协议三步握手建立连接(代码中应该封装好了,也没看到咋连的还要多看看)
(2)客户端发起socket.on请求给服务器socket.on里包含了一个'频道'(暂时这么称,每个频道有不同功能)、data数据、回调函数等,服务器对应的‘频道’接收
(3)服务器处理请求,不同'频道'进行不同处理,有的‘频道’是传给某个用户的(私发),有的是传给某个聊天室的(群发),有的是改变某些状态的等,。。。就是请求不同接口(函数?)吧
(4)用户断开连接,服务器有个socket.on('disconnect',()=>{})函数,在里面可以进行各种如‘提示其他用户某用户退出’等操作。
仰天长啸:就这么些东西为什么egg要我搞那么多乱七八糟的操作还运行不了???。。。交互阶段主要就是一端socket.emit发送消息,另一端socket.on接收消息,接收完后还可以socket.emit给其他客户端等,有趣。
以上,前两天看的socket.io,以后看一个新的概念再也不瞎打了,还是老老实实理解了概念下个demo改着玩有意思,此文只是大概描述一下我刚了解socket.io的初步感触吧,名词什么的上面描述的不好的也很多,频道?函数?接口?。。。明白了就行hhh