基于WebSocket的web端IM即時通訊應用的開發

---

功能列表：

1、Web端的IM即時通訊應用

2、支持上線、下線、實時在線提醒

3、單聊、群聊的建立

4、普通文字、表情、圖片的傳輸(子定義富文本)

5、單人的頂級提醒，多對話的窗口的提醒

6、調用圖靈機器人的自動回復演示

目前的兼容性未做太多測試，主要是谷歌瀏覽器。

核心技術列表

1、websocket、sockjs、stomp

2、前端展示涉及的jquery、vue、elementUI、jquerybase64js

3、后端springboot、jsoup、spring-security、spring-websocket

成果展示：

技術實現說明：

Websocket部分

web端的IM應用，要想實現兩個客戶端的通信，必然要通過服務器進行信息的轉發。例如A要和B通信，則應該是A先把信息發送給IM應用服務器，服務器根據A信息中攜帶的接收者將它再轉發給B，同樣B到A也是這種模式。

而要實現web端的實時通訊，websocket也是其中最好的方式，其他的協議如長輪詢、短輪詢、iframe數據、htmlfile等。

在實際開發中，我們通常使用的是一些別人寫好的實時通訊的庫，比如socket.io、sockjs(我們本次使用了他，類似jquery，對其他即時通訊技術做了封裝)，他們的原理就是將上面(還有一些其他的如基于Flash的push)的一些技術進行了在客戶端和服務端的封裝，然后給開發者一個統一調用的接口。這個接口在支持websocket的環境下使用websocket，在不支持它的時候啟用上面所講的一些hack技術。

WebSocket是HTML5的一種新通信協議(ws協議)，是一個消息架構，不強制使用任何特定的消息協議，它依賴于應用層解釋消息的含義；與處在應用層的HTTP不同，WebSocket處在TCP上非常薄的一層，會將字節流轉換為文本/二進制消息，因此，對于實際應用來說，WebSocket的通信形式層級過低，因此，可以在 WebSocket 之上使用 STOMP協議，來為瀏覽器 和 server間的 通信增加適當的消息語義。

STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的簡單文本協議。 同 HTTP 在 TCP 套接字上添加請求-響應模型層一樣，STOMP 在 WebSocket 之上提供了一個基于幀的線路格式層，用來定義消息語義；

STOMP 源碼http://cdn.bootcss.com/stomp.js/2.3.3/stomp.js，有興趣的可以看一下能大致了解其原理和用法。

本例程序核心代碼：

var socket = new SockJS('/im-websocket');stompClient = Stomp.over(socket);//設置stomp 控制臺日志為不輸出stompClient.debug=null;stompClient.connect({}, function (frame) { // 相當于連接 ws://localhost:8080/gs-guide-websocket/041/hk5tax0r/websocket hk5tax0r就是sessionid console.log("正在連接 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的websocket 发送图片_基于WebSocket的web端IM即时通讯应用的开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。