WebSocket搭建简单的聊天室_websocket server 聊天shi-CSDN博客

本文链接：https://blog.csdn.net/Nicholas_GUB/article/details/106789928

WebSocket搭建简单的聊天室

从Servlet3.1开始，Tomcat中就增加了一个websocket-api.jar开发包，这个包可以进行WebSocket程序开发，并且是基于Annotation注解的形式配置的。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

搭建简单的聊天室

1.编写服务器端程序

package com.websocket;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.Set;

@ServerEndpoint(value="/message")
public class MessageWebSocket {
    @OnOpen
    public void openMethod(){//打开WebSocket连接的方法
        System.out.println("【----WebSocket连接建立----】");
    }

    @OnMessage
    public void messageHandle(String message, Session session){//处理消息
        try{
            Set<Session> sessions = session.getOpenSessions();//取得全部的客户端
            Iterator<Session> sessionsIter = sessions.iterator();
            while(sessionsIter.hasNext()){//取出每一个session数据
                Session son = sessionsIter.next();
                String sid = son.getId();
                son.getAsyncRemote().sendText(sid+"："+message+"\n发送时间："+
                        new SimpleDateFormat("yyyy-MM-dd HH::mm::ss.SSS").format(new Date()));
            }
        }catch(Exception e){
            e.printStackTrace();
        }
    }

    @OnClose
    public void closeMethod(){//关闭WebSocket连接的方法
        System.out.println("【----WebSocket连接关闭----】");
    }
}

2.编写客户端程序

HTML5中的WebSocket 对象有以下属性：

No	属性	描述
1	readyState	反映当前连接状态（只读属性）

readyState属性有以下取值：

取值	描述
0	连接尚未建立
1	连接已建立，可以进行通讯
2	连接正在关闭
3	连接已经关闭

WebSocket 对象有以下事件

No	事件	处理程序	描述
1	open	websocket.onopen	连接建立时触发
2	message	websocket.onmessage	客户端接收服务器数据时触发
3	close	websocket.onclose	连接关闭时触发
4	error	websocket.onerror	通信错误时触发

WebSocket 对象有以下主要方法进行通讯：

No	方法	描述
1	send()	使用连接发送数据
2	close()	关闭连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chatroom</title>
    <style type="text/css">
        .context{
            border:1px solid #111111;
            width:350px;
            border-radius:20px;
            background:#A0EEE1;
            padding:12px;
            margin:10px;
        }
        .username{
            font-size:27px;
            color:#D1BA74;
        }
        #div1{
            font-size:22px;
            color:#F4606C;
        }
        .in1{
            border-radius:6px;
            height:25px;
        }
        #sendBut{
            width:150px;
            background:#19CAAD;
            font-size:25px;
            border-radius:10px;
        }
    </style>
</head>
<body>
<div id="contentDiv" style="height:400px;overflow: scroll;background: lightblue">
</div>
<div id="div1">
    <label>用户名：</label>
    <input type="text" class="in1" name="username" id="username" /><br>
    <label>请输入内容：</label>
    <input type="text" class="in1" id="info" name="info"/>
    <input type="button" id="sendBut" value="发送"/>
</div>
<script type="text/javascript">
    var websocket = null;//定义WebSocket处理对象
    var url = "ws://localhost:8080/message";//定义WebSocket连接地址
    function init(){
        if('WebSocket' in window){//当前浏览器是否支持WebSocket
            websocket = new WebSocket(url);//直接实例化
        }else{
            if('MozWebSocket' in window){
                websocket = new MozWebSocket(url);//直接实例化
            }else{
                alert('您的浏览器不支持当前操作...');
            }
        }
    }
    window.onload = function(){
        init();
        websocket.onopen = function(){//WebSocket建立连接时触发该方法
            document.getElementById('contentDiv').innerHTML+='<p>WebSocket连接建立</p>';
        };
        websocket.onclose = function() {//WebSocket断开连接时触发该方法
            document.getElementById('contentDiv').innerHTML += '<p>WebSocket连接已断开</p>';
        };
        websocket.onmessage = function(e){//WebSocket接收数据触发该方法
            var divEle = document.createElement("div");
            divEle.setAttribute("class","context");
            var result = e.data.split("|");
            var msg = result[0].split(":");
            var userSpanEle = document.createElement("span");
            userSpanEle.appendChild(document.createTextNode(msg[0]+":"));
            userSpanEle.setAttribute("class","username");
            var msgSpanEle = document.createTextNode(msg[1]);
            var dateSpanEle = document.createTextNode(result[1]);
            divEle.appendChild(userSpanEle);
            divEle.appendChild(msgSpanEle);
            divEle.appendChild(document.createElement('br'));
            divEle.appendChild(dateSpanEle);
            document.getElementById('contentDiv').appendChild(divEle);
        };
        document.getElementById("sendBut").addEventListener("click",function(){
            var info = document.getElementById('info').value;
            var username = document.getElementById('username').value;
            info = username+":"+info;
            websocket.send(info);//将数据发送到服务器
        },false);
    }
</script>
</body>
</html>