1 开发环境 : myeclipse10 + tomcat7 + jdk1.7
2 需要导入jar包
2.1 tomcat7-websocket.jar
2.2 websocket-api.jar
3 项目截图
4 DemeConfig.java
这是websocket配置类, 不需要再任何地方配置,启动 tomcat后会输出 -------------websoket start----------------- ,表示成功
package com.webSocket.config;
import java.util.Set;
import javax.websocket.Endpoint;
import javax.websocket.server.ServerApplicationConfig;
import javax.websocket.server.ServerEndpointConfig;
public class DemeConfig implements ServerApplicationConfig{
//注解的方式 启动
public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scan) {
System.out.println("-------------websoket start-----------------");
System.out.println("scan.size() = " + scan.size());
return scan; //必须要返回scan,否则会造成连接失败
}
//接口方式启动
public Set<ServerEndpointConfig> getEndpointConfigs(
Set<Class<? extends Endpoint>> arg0) {
return null;
}
}
5 EchoSocket.java
服务器开启了一个叫 echo 的socket
package com.webSocket.client;
import java.io.IOException;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/echo")
public class EchoSocket {
@OnOpen
public void open(Session session){ //打开websocket
String id = session.getId();
System.out.println("websocket is open");
System.out.println("user id is " + id);
System.out.println("session.isOpen() = " + session.isOpen());
}
@OnClose
public void close(Session session){ //关闭websocket
System.out.println("websocket is close");
}
@OnMessage
public void message(Session session,String message){
//接收客服端信息
System.out.println("客服端信息为 : " + message);
//给客服端发送信息
try {
if (session.isOpen()) {
session.getBasicRemote().sendText("服务器说 : " + message);
}
} catch (IOException e) {
try {
session.close();
} catch (IOException e1) {
// Ignore
e1.printStackTrace();
}
}
}
}
6 index.jsp
<%@ page language="java" import="java.util.*,javax.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<body>
<script type="text/javascript">
var ws=null;
var target = "ws://"+window.location.host+"/webSocketTest/echo"; // 打开管道 ,ws://localhost:8080/项目名/@ServerEndpoint名字
openWebsocket = function(){
if ('WebSocket' in window) {
ws = new WebSocket(target);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(target);
} else {
alert('WebSocket is not supported by this browser.');
return;
}
ws.onmessage = function (event) { //创建websocket同时,接收服务器发给客服端的消息
if(event!=null){
var servermsg = event.data;
var textArea = document.getElementById("textAreadID");
textArea.value = textArea.value + servermsg;
}
};
}
sendMessage = function(){ //发送信息
if(ws!=null){
var sendMessageInput = document.getElementById("sendMessageInput");
var msg = sendMessageInput.value;
ws.send(msg);
sendMessageInput.value ="";
}
else{
alert("websocket is null , please create a websocket");
}
}
</script>
<button onclick="openWebsocket()">open</button>
<input id="sendMessageInput"></input>
<button onclick="sendMessage()">send</button></br>
<textarea id="textAreadID" rows="5" cols="20"></textarea>
</body>
</html>
7 操作方法 ，先点击 open ,然后在input输入信息 ， 点击send , 会在 textarea区域更新信息 ,截图
