连接的时候会触发 open 事件 .. 断开的时候会触发 close 事件，我们可以在前端监听这两个事件 .. 先修改一下这个 websocket 演示页面的视图 .. 打开 ws.edge ..

在这个连接状态标签上，有个小图标 .. 上面添加了一个 text-muted .. 这个类我们可以把它放在 connection-status 这个元素的下面 .. 这样成功连接到了 websocket 服务器以后，可以去掉这个元素上的 text-muted 类 .. 然后在小图标的上面添加一个 text-success ，改变一下小图标的颜色 ..

然后打开 ws-demo ，这里先添加几个东西 ... const connectionStatus 它的值用一下 jQuery 找到页面上带 .connection-status 类的元素 ..

再添加一个 connectionStatusText .. 用 jquery .. 找到 .connection-status 下面的 .text 元素 .. 就是状态标签里的文字 ..

然后再添加一个 connectionStatusIcon ... 定位到 .connection-status 下面的 .icon 元素 .. 它是状态标签里的小图标 ..

下面可以再用一下 ws.on ... 监听一下 open 这个事件 .. 一个回调 ... 连接成功以后，可以先去掉状态标签上面添加的 text-muted 这个类 .. connectionStatus.removeClass() .. 类的名字是 text-muted ..

在小图标的元素上面，再添加一个新的类 .. connectionStatusIcon .. addClass ... 添加一个 text-success ...

再设置一下状态标签里的文字 .. connectionStatusText .. 用一下 text 方法 ... 文字设置成 Connected ...

断开的时候会触发 close 事件 ... 再去监听一下这个事件 .. ws.on ... close ... 一个回调 ... 断开的时候，在 connectionStatus 上面添加一个 css 类 .. 名字是 text-muted ...

再把 connectionStatusIcon 上的 text-success 这个类去掉 ... 用一下 removeClass 方法去掉元素上的类 ..

然后再设置一下 connectionStatusText 里的文字 .. 文字是 Disconnected

试验

回到浏览器 ...

连接成功以后，会去掉连接状态小标签上的 text-muted 类，文字替换成了 connected .. 小图标上面会添加一个 text-success ，所以它会变成绿色 ...

再执行一下 ws.close() ... 断开连接 ... 重新在状态标签上添加 text-muted .. 文字变成了 Disconnected .. 去掉了小图标上的 text-success 类 ...