基于WebSocket的web端IM即時(shí)通訊應(yīng)用的開(kāi)發(fā)

---

功能列表：

1、Web端的IM即時(shí)通訊應(yīng)用

2、支持上線、下線、實(shí)時(shí)在線提醒

3、單聊、群聊的建立

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

5、單人的頂級(jí)提醒，多對(duì)話的窗口的提醒

6、調(diào)用圖靈機(jī)器人的自動(dòng)回復(fù)演示

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

核心技術(shù)列表

1、websocket、sockjs、stomp

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

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

成果展示：

技術(shù)實(shí)現(xiàn)說(shuō)明：

Websocket部分

web端的IM應(yīng)用，要想實(shí)現(xiàn)兩個(gè)客戶端的通信，必然要通過(guò)服務(wù)器進(jìn)行信息的轉(zhuǎn)發(fā)。例如A要和B通信，則應(yīng)該是A先把信息發(fā)送給IM應(yīng)用服務(wù)器，服務(wù)器根據(jù)A信息中攜帶的接收者將它再轉(zhuǎn)發(fā)給B，同樣B到A也是這種模式。

而要實(shí)現(xiàn)web端的實(shí)時(shí)通訊，websocket也是其中最好的方式，其他的協(xié)議如長(zhǎng)輪詢、短輪詢、iframe數(shù)據(jù)、htmlfile等。

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

WebSocket是HTML5的一種新通信協(xié)議(ws協(xié)議)，是一個(gè)消息架構(gòu)，不強(qiáng)制使用任何特定的消息協(xié)議，它依賴于應(yīng)用層解釋消息的含義；與處在應(yīng)用層的HTTP不同，WebSocket處在TCP上非常薄的一層，會(huì)將字節(jié)流轉(zhuǎn)換為文本/二進(jìn)制消息，因此，對(duì)于實(shí)際應(yīng)用來(lái)說(shuō)，WebSocket的通信形式層級(jí)過(guò)低，因此，可以在 WebSocket 之上使用 STOMP協(xié)議，來(lái)為瀏覽器 和 server間的 通信增加適當(dāng)?shù)南⒄Z(yǔ)義。

STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的簡(jiǎn)單文本協(xié)議。 同 HTTP 在 TCP 套接字上添加請(qǐng)求-響應(yīng)模型層一樣，STOMP 在 WebSocket 之上提供了一個(gè)基于幀的線路格式層，用來(lái)定義消息語(yǔ)義；

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

本例程序核心代碼：

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。