WebSocket实现简单的web聊天室

WebSocket实现简单的web聊天室WebSocket实现简单的web聊天室1.需要Tomcat7.0所以服务器2.需要JDK7.03.手工加入Tomcat7.0中lib目录下的一下三个包catalina.jar、tomcat-coyote.jar、websocket-api.jar4.项目部署后,请将服务器中当前项目下的catalina.jar、tomcat-coyote.jar、websocket-api

大家好,又见面了,我是你们的朋友全栈君。

WebSocket实现简单的web聊天室
1.需要Tomcat7.0所以服务器

2.需要JDK7.0
3.手工加入Tomcat7.0中lib目录下的一下三个包catalina.jar、tomcat-coyote.jar、websocket-api.jar
4.项目部署后,请将服务器中当前项目下的catalina.jar、tomcat-coyote.jar、websocket-api.jar三个包删除。
5.项目目录结构如下


图片

Servlet代码

package com.yc.websockets;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;

@SuppressWarnings({“deprecation”,”unused”, “serial”})
public class WebSocketTest extends WebSocketServlet {
private static List<MyMessageInbound> userList = new ArrayList<MyMessageInbound>();
private HttpSession session;

    @Override
    protected StreamInbound createWebSocketInbound(String str, HttpServletRequest request) {
    
session=request.getSession();
        return new MyMessageInbound();
    }

    private class MyMessageInbound extends MessageInbound {
        WsOutbound myoutbound;

        /**
         * 当用户登录时,WebSocket握手完成,创建完毕,WsOutbound用于向客户端发送数据
         */
public void onOpen(WsOutbound outbound) {
            try {
                System.out.println(“Open Client.”);
                this.myoutbound = outbound;
                userList.add(this); //添加当前用户
                
                //向客服端发送信息
                outbound.writeTextMessage(CharBuffer.wrap(“Hello!”));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

/**
 * 用户退出时,WebSocket关闭事件,参数status应该来自org.apache.catalina.websocket.Constants
 * 中定义的几个常量,可以参考文档或者核对一下Tomcat的源码
 */
        @Override
        public void onClose(int status) {
            userList.remove(this); //移除当前用户
        }

       /**
        * 接受用户发过来的信息,有文本消息数据到达
        */
        @Override
        public void onTextMessage(CharBuffer cb) throws IOException {
            for (MyMessageInbound mmib:userList){ //循环向所有在线用户发送当前用户的信息
                CharBuffer buffer = CharBuffer.wrap(cb);
                mmib.myoutbound.writeTextMessage(buffer); //调用指定用户的发送方法发送当前用户信息
                mmib.myoutbound.flush(); //清空缓存
            }
        }

        /**
         * 有二进制消息数据到达,暂时没研究出这个函数什么情况下触发,js的WebSocket按理说应该只能send文本信息才对
         */
        @Override
        public void onBinaryMessage(ByteBuffer bb) throws IOException {
        }
    }
}

web.xml配置文件


 
<?xml version=”1.0″ encoding=”UTF-8″?>

<web-app version=”3.0″ xmlns=”
http://java.sun.com/xml/ns/javaee
xsi:schemaLocation=”
http://java.sun.com/xml/ns/javaee ;
<display-name></display-name>
  
<servlet>
<servlet-name>webServlet</servlet-name>
<servlet-class>com.yc.websockets.WebSocketTest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>webServlet</servlet-name>
<url-pattern>/webServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>


index.html


<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Tomcat WebSocket Chat</title>
<script>
//设定WebSocket,注意协议是ws,请求是指向对应的WebSocketServlet的
/*设定WebSocket,注意协议是ws,请求是指向对应的WebSocketServlet的
var url = “ws://127.0.0.1:8080/j2ee6/echo.ws”;
// 创建WebSocket实例,下面那个MozWebSocket是Firefox的实现
if (‘WebSocket’ in window) {
ws = new WebSocket(url);
} else if (‘MozWebSocket’ in window) {
ws = new MozWebSocket(url);
} else {
alert(‘Unsupported.’);
return;
}*/
var ws = new WebSocket(“ws://218.196.14.208:8080/webSocket/webServlet”);

//WebSocket握手完成,连接成功的回调
//有个疑问,按理说new WebSocket的时候就会开始连接了,如果在设置onopen以前连接成功,是否还会触发这个回调
ws.onopen = function() {
//请求成功
};

//收到服务器发送的文本消息, event.data表示文本内容
ws.onmessage = function(message) {
document.getElementById(“talkInfo”).innerHTML+=message.data+”<hr style=’border: 1px dashed #CCC’/>”;
};

//关闭WebSocket的回调
ws.onclose = function() {
//alert(‘Closed!’);
};

// 通过WebSocket想向服务器发送一个文本信息
function postToServer() {
ws.send(document.getElementById(“content”).value);
document.getElementById(“content”).value = “”;
}

//关闭WebSocket
function closeConnect() {
ws.close();
}
</script>
<style>
* {
margin: 0 auto;
padding: 0px;
font-size: 12px;
font-family: “微软雅黑”;
line-height: 26px;
}

#bigbox {
margin:0px auto;
padding:0px;
width:70%;
}

#talkInfo{
width:100%;
height:500px;
border:1px solid red;
overflow: scorll;
}

#operation{
width:100%;
height:30px;
margin-top:10px;
}

#content{
height:30px;
line-height:30px;
}
</style>
</head>
<body>
<div id=”bigbox”>
<div id=”talkInfo”></div>
<div id=”operation”>
<center>
<input type=”text” name=”content” id=”content” size=”100″/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type=”button” value=” &nbsp;发送&nbsp; ” οnclick=”postToServer()” />&nbsp;&nbsp;
<input type=”button” value=” &nbsp;我闪 &nbsp; ” οnclick=”closeConnect()” />
</center>
</div>
</div>
</body>

</html>
 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/152190.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 将一个接口响应时间从2s优化到 200ms以内的一个案例

    将一个接口响应时间从2s优化到 200ms以内的一个案例一 背景在开发联调阶段发现一个接口的响应时间特别长 经常超时 囧 本文讲讲是如何定位到性能瓶颈以及修改的思路 将该接口从 2s 左右优化到 200ms 以内 二 步骤 2 1 定位定位性能瓶颈有两个思路 一个是通过工具去监控 一个是通过经验去猜想 2 1 1 工具监控就工具而言 推荐使用 arthas 用到的是 trace 命令具体安装步骤很简单 大家自行研究 我的使用步骤是

    2025年7月7日
    6
  • sql server 字符串转成日期格式_sql datetime转字符串

    sql server 字符串转成日期格式_sql datetime转字符串一、sqlserver日期时间函数SqlServer中的日期与时间函数1.当前系统日期、时间selectgetdate()2.dateadd在向指定日期加上一段时间的基础上,返回新的datetime值例如:向日期加上2天selectdateadd(day,2,’2004-10-15′)–返回:2004-10-17

    2022年10月8日
    3
  • 软件测试经典面试题(小题汇总)[通俗易懂]

    整理收集一些大家的题,自己来作答,回答不妥或者不全的还请大家指正网络(一)简单描述下TCP协议TCP:传输控制协议,是传输层通信协议。它有面向连接、可靠、字节流传输等特点TCP建立连接时,需要三次握手协议TCP三次握手的过程如下:客户端发送SYN保温给服务端,进入SYN_SEND(SEQ=X)状态服务端收到SYN保温,回应一个SYN(SEQ=Y)ACK(ACK=X+1)报文,进入…

    2022年4月13日
    36
  • 【js特效】图片循环滚动代码「建议收藏」

    【js特效】图片循环滚动代码「建议收藏」1.效果图如下:2.html代码:图片滚屏效果-www.miaov.com-妙味课堂 间隔停顿 短 中 长 滚动速度: 慢 中 快

    2022年7月18日
    12
  • 何不给你单调的鼠标指针换一个好看的样式?(Windows系统下)

    鼠标指针是我们日常操控电脑最基本的工具,用久了难免会有些单调。换一个更好看或更炫酷的皮肤,或许会给你带来不一样的心情!这是我新换的鼠标指针样式,是不是很有意思。访问这个网站:点击跳转里面有几百种鼠标指针美化包。选好你喜欢的美化包后,点击下载。将下载好的安装包解压。里面有一个.inf文件。右键点击安装遇到下面这个,确定即可。安装完成后,右击鼠标选择个性化,主…

    2022年4月12日
    58
  • scratch编程小游戏咬指大冒险

    scratch编程小游戏咬指大冒险咬指大冒险是一款非常好玩的玩具,玩法就是玩家不断按下小动物的牙齿,牙齿中只有一个是危险的,按下后小动物的嘴巴会闭上咬住手指,其余的牙齿都是安全的。今天我们就来用scratch来做一个电子版的咬指大冒险!这里我们选用一个鳄鱼的造型,首先画出鳄鱼的两个造型,一个张嘴和一个闭嘴,张嘴的造型不需要画下牙齿:要画大一点哦!程序:下面是牙齿的造型,一个有三个:牙齿的排列方式是一段弧,可以先排列好后再调整鳄鱼的嘴巴:最后是被咬时血液的程序:注意,这里的自定义模块需要勾选运行时屏幕不刷新,如果不

    2022年6月15日
    54

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号