WebSocket搭建简单的聊天室

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() 关闭连接

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chatroomtitle>
    <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+='

WebSocket连接建立

'
; }; websocket.onclose = function() {//WebSocket断开连接时触发该方法 document.getElementById('contentDiv').innerHTML += '

WebSocket连接已断开

'
; }; 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>
3.查看运行效果

WebSocket搭建简单的聊天室_第1张图片
WebSocket搭建简单的聊天室_第2张图片
WebSocket搭建简单的聊天室_第3张图片

你可能感兴趣的:(Ajax异步交互,html5,websocket)