本编接着上篇后端基于Netty服务器的websocket服务 ,做一个前端的简单展示

顺便学习一下前端的知识点,关于js的websocket通信方式和http请求也差不多,看下面:

var socket = new WebSocket("ws://[ip地址]:[端口]");

ws:// 部分是一个协议,比如http://,https:// 都很类似 ; ip,端口什么的就不说了

包含以下函数: onopen() , onmessage() , onerror() , onclose() , Socket.send() , Socket.close()

• onopen 建立连接时触发
• onmessage 服务端向客户端发送消息,接收到消息时触发
• onerror 错误时触发
• onclose 关闭连接时触发
• send 主动发送消息给后端,比如回车发消息
• close 主动关闭socket连接,比如关闭聊天窗口,退出游戏等

看上去像websocket请求的生命周期,前端和后端的通道Channel差不多的生命周期

函数也不多,理解了作用就可以直接上手操作了,使用vue-cli搭建vue进行测试,很快,并搭配了element-ui构建ui界面

vue页面代码如下: 

结合上一篇 后端 ,都启动,简单的页面  测试展示 , 开两个客户端: 

第一个客户端:

第二个客户端: 

发送消息,接收消息都OK的

注意: ws://localhost:8081/ws  最后这个ws是后端定义的路由,不一定是我这边的ws