網站首頁 編程語言 正文
本文內容是搭配后端使用的,沒看過WebSocket后端實現的童鞋們戳這里
咳咳,其實前端實現相對就容易很多了,因為我們有JavaScript WebSocket Api,它看上來大致是這樣的:
var ws = '';//WebSocket對象 var userName = '測試同學' + parseInt(Math.random(1) * 888);//用戶名 //初始化連接 function connect() { var address = "ws://127.0.0.1:10086";//服務端地址 ws = new WebSocket(address);//實例化WebSocket對象 //開始連接時 ws.onopen = function (e) { ws.send('[login]{"userid":"' + userName + '"}'); }; //收到信息時 ws.onmessage = function (e) { var Json = eval('(' + e.data + ')'); switch (Json.type) { case '1': //新用戶連接時 break; case '2': var Html = ''; Html += '<p>'; Html += Json.user + ':' + Json.msg; Html += '</p>'; $('#msgBox').append(Html); break; } }; //發生錯誤時 ws.onerror = function (e) { }; //連接關閉時 ws.onclose = function (e) { $('#msgBox').append('<p>與聊天室的連接已斷開。</p>'); }; } //公聊發送 function send() { var SendText = $('#send').val(); ws.send('[send]{"msg":"' + SendText + '","user":"' + userName + '"}'); }
這些東西是固定的,記就行了~簡單解釋下:
關鍵之一:ws.onmessage,它可以在收到服務端信息時做出響應——然后你就可以為所欲為了。
該方法返回的信息存儲在e.data內,內容取決于你的服務端如何編寫(這里視作返回Json)。
關鍵之二:ws.send(),它可以發送信息到你編寫的服務端(至于內容,依然取決于你后端如何實現)。
關鍵之三:ws.onopen(),通過它可以打開與服務端的溝通(要設置好WebSocket對象)。
下面是實現的效果(很丑勿吐槽):
記得要找支持H5的瀏覽器哦~
原文鏈接:https://www.cnblogs.com/muchengqingxin/p/6043672.html
相關推薦
- 2022-07-14 浮點數乘法和整形乘除法的效率經驗比較_C 語言
- 2022-02-03 ionic集成極光推送之點擊推送跳轉到指定頁面
- 2022-04-09 SpringBoot設置CorsFilter過濾器解決跨域問題
- 2022-04-24 一起來學習C語言的字符串轉換函數_C 語言
- 2023-02-15 PyQt5+PyQt5Designer的安裝步驟_python
- 2022-05-14 Centos8安裝docker報錯(錯誤提示:All?mirrors?were?tried)的問題_
- 2022-03-27 MongoDB4.28開啟權限認證配置用戶密碼登錄功能_MongoDB
- 2022-11-14 gorm crud 指南
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支