WebSocket消息推送(實現進行聊天)和WebSocket簡介


WebSocket簡介

WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通訊的網絡技術。依靠這種技術可以實現客戶端和服務器端的長連接,雙向實時通信。
特點:
事件驅動
異步
使用ws或者wss協議的客戶端socket

能夠實現真正意義上的推送功能

缺點:

少部分瀏覽器不支持,瀏覽器支持的程度與方式有區別。

 

下面進行代碼和圖解:

我現在使用idea進行創建一個項目,下面會給實例項目

簡單介紹WebSocket客戶端服務器端

WebSocket客戶端

websocket允許通過JavaScript建立與遠程服務器的連接,從而實現客戶端與服務器間雙向的通信。在websocket中有兩個方法:  
    1、send() 向遠程服務器發送數據
    2、close() 關閉該websocket鏈接
  websocket同時還定義了幾個監聽函數    
    1、onopen 當網絡連接建立時觸發該事件
    2、onerror 當網絡發生錯誤時觸發該事件
    3、onclose 當websocket被關閉時觸發該事件
    4、onmessage 當websocket接收到服務器發來的消息的時觸發的事件,也是通信中最重要的一個監聽事件。msg.data
  websocket還定義了一個readyState屬性,這個屬性可以返回websocket所處的狀態:
    1、CONNECTING(0) websocket正嘗試與服務器建立連接
    2、OPEN(1) websocket與服務器已經建立連接
    3、CLOSING(2) websocket正在關閉與服務器的連接
    4、CLOSED(3) websocket已經關閉了與服務器的連接

  websocket的url開頭是ws,如果需要ssl加密可以使用wss,當我們調用websocket的構造方法構建一個websocket對象(new WebSocket(url))的之后,就可以進行即時通信了。

我使用的是idea進行演示

 簡單的聊天

客戶端代碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>聊天室</title>
</head>
<style>
    body{text-align: center;}
    #div1{width:802px;height: 500px;border:1px solid red;margin: auto}
    #cs{width:650px;height: 350px;border:1px solid red;float: left;}
    #cs2{width: 148px;height: 350px;border: 1px solid red;float: left;}
    p{text-align: left}
    #ss{    height: 109px;
        width: 796px;}
    #cs,#cs2{OVERFLOW: auto;}
    #btnSend{float: right;width: 100px;height: 30px;}
</style>
<body>
<h2>小小聊天室</h2>
<input type="button" id="btnConnection" value="打開連接" />
<input type="button" id="btnClose" value="關閉連接" />
<div id="div1">
    <div id="cs" ></div>
    <div id="cs2"></div>
    <textarea id="ss"></textarea>
   <br/> <input type="button" id="btnSend" value="發送" />
</div>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的瀏覽器不支持WebSocket");
    }
    $("#btnSend").attr("disabled","disabled");//禁用
    $("#btnClose").attr("disabled","disabled");//禁用
    var name;
    $("#btnConnection").click(function() {
       name= prompt("請輸入發送的名稱:");
        if(name!=null){
            $("#btnConnection").attr("disabled","disabled");//禁用
            //實現化WebSocket對象,指定要連接的服務器地址與端口
            //socket = new WebSocket("ws://169.254.105.218:8080/ws/"+name);
            //本機
            socket = new WebSocket("ws://localhost/ws/"+name);
            //打開事件
            socket.onopen = function() {
                $("#btnSend").attr("disabled","");//禁用
                $("#btnClose").attr("disabled","");//禁用
                $("#cs2").append($("<p/>").html(name+":連接成功"));
            };
            //獲得消息事件
            socket.onmessage = function(msg) {
                $("#cs").append($("<p/>").html(msg.data));
            };
            //關閉事件
            socket.onclose = function() {
                $("#btnSend").attr("disabled","disabled");//禁用
                $("#btnConnection").attr("disabled","");//禁用
                $("#btnClose").attr("disabled","disabled");//禁用
                $("#cs2").append($("<p/>").html(name+":已關閉"));
            };
            //發生了錯誤事件
            socket.onerror = function() {
                $("#cs2").append($("<p/>").html("已關閉發生了錯誤"));

            }
        }

    });

    //發送消息
    $("#btnSend").click(function() {
        socket.send(document.getElementById("ss").value);
        $("#ss").val("");
    });

    //關閉
    $("#btnClose").click(function() {
        socket.close();
    });

</script>
</body>

</html>
View Code

 

WebSocket服務器端

JSR356定義了WebSocket的規范,Tomcat7中實現了該標准。JSR356 的 WebSocket 規范使用 javax.websocket.*的 API,可以將一個普通 Java 對象(POJO)使用 @ServerEndpoint 注釋作為 WebSocket 服務器的端點。

服務器代碼如下:

package com;
import java.io.IOException;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;

import javax.websocket.CloseReason;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/ws/{user}")
public class SServlet {
    private String currentUser;

    private static Set<Session> sessions = new HashSet<>();

    //連接打開時執行
    @OnOpen
    public void onOpen(@PathParam("user") String user, Session session) {
        currentUser = user;
        //System.out.println("Connected ... " + session.getId());
        sessions.add(session);
        System.out.println(user);
    }

    //收到消息時執行
    @OnMessage
    public String onMessage(String message, Session session) throws IOException {
        System.out.println(currentUser + ":" + message);

        //發送給所有人
        for (Session s : sessions) {
            if (s.isOpen()) {
                s.getBasicRemote().sendText(currentUser+"說:"+message);
            }
        }
        return null;
    }

    //連接關閉時執行
    @OnClose
    public void onClose(Session session, CloseReason closeReason) {
        System.out.println(String.format("Session %s closed because of %s", session.getId(), closeReason));
    }

    //連接錯誤時執行
    @OnError
    public void onError(Throwable t) {
        t.printStackTrace();
    }
}
View Code

需要引用websocket包:官網地址:https://mvnrepository.com/artifact/javax.websocket/javax.websocket-api

 

或者直接下載

項目實例和包地址:https://github.com/weibanggang/Message_push

 

高手教師詳細(果哥):https://www.cnblogs.com/best/p/5695570.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM