websocket連接jsp,websocket連接錯誤

本文目錄一覽：

• 1、關於JSP連接ACCESS的問題，為什麼會報錯
• 2、jdbc 連接資料庫 jsp報錯求解？
• 3、怎樣用java web和websocket實現網頁即時通訊

關於JSP連接ACCESS的問題，為什麼會報錯

Acess.jsp文件中 Page指令中有無效的屬性：errorpage

errorpage改成errorPage

java中對大小寫敏感！

jdbc 連接資料庫 jsp報錯求解？

異常信息裡面有空指針異常，你代碼裡面直接循環查出來的數據集合，會有問題，如果資料庫裡面沒有數據，你集合就是空的，不能直接循環

怎樣用java web和websocket實現網頁即時通訊

原理

WebSocket protocol 。

現很多網站為了實現即時通訊，所用的技術都是輪詢(polling)。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對伺服器發出HTTP request，然後由伺服器返回最新的數據給客戶端的瀏覽器。這種傳統的HTTP request 的模式帶來很明顯的缺點 – 瀏覽器需要不斷的向伺服器發出請求，然而HTTP request 的header是非常長的，裡面包含的有用數據可能只是一個很小的值，這樣會佔用很多的帶寬。

而比較新的技術去做輪詢的效果是Comet – 用了AJAX。但這種技術雖然可達到全雙工通信，但依然需要發出請求。

在 WebSocket API，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。在此WebSocket 協議中，為我們實現即時服務帶來了兩大好處：

1. Header

互相溝通的Header是很小的-大概只有 2 Bytes

2. Server Push

伺服器的推送，伺服器不再被動的接收到瀏覽器的request之後才返回數據，而是在有新數據時就主動推送給瀏覽器。

一、項目簡介

WebSocket是HTML5一種新的協議，它實現了瀏覽器與伺服器全雙工通信，這裡就將使用WebSocket來開發網頁聊天室，前端框架會使用AmazeUI，後台使用Java，編輯器使用UMEditor。

二、涉及知識點

網頁前端（HTML+CSS+JS）和Java

三、軟體環境 Tomcat 7 JDK 7 Eclipse JavaEE 現代瀏覽器

四、效果截圖

效果1

效果2

五、項目實戰

1. 新建項目

打開Eclipse JavaEE，新建一個名為Chat的Dynamic Web Project，然後導入處理JSON格式字元串所需要的包，把commons-beanutils-1.8.0.jar、commons-collections-3.2.1.jar、commons-lang-2.5.jar、commons-logging-1.1.1.jar、ezmorph-1.0.6.jar和json-lib-2.4-jdk15.jar這幾個包放在WebContent/WEB-INF/lib目錄下，最後把項目發布到Tomcat伺服器上，到此空項目就搭建完成了。

2. 編寫前端頁面

在WebContent目錄下新建一個名為index.jsp的頁面，這裡使用了AmazeUI框架，它是一個跨屏自適應的前端框架，消息輸入框使用了UMEditor，它是一個富文本在線編輯器，能讓我們的消息內容多姿多彩。

首先從 AmazeUI官網 下載壓縮包，然後解壓把assets文件夾拷貝到WebContent目錄下，這樣我們就能使用AmazeUI了。

再從 UEditer官網 下載Mini版的JSP版本壓縮包，解壓後把整個目錄拷貝到WebContent目錄下，接下來就可以編寫前端代碼了，代碼如下（你可以按照自己的喜好編寫）：

?

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293    %@ page language=”java” contentType=”text/html; charset=UTF-8″ pageEncoding=”UTF-8″%!DOCTYPE htmlhtml lang=”zh”headmeta charset=”utf-8″meta http-equiv=”X-UA-Compatible” content=”IE=edge”meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”titleShiYanLou Chat/title!– Set render engine for 360 browser –meta name=”renderer” content=”webkit”!– No Baidu Siteapp–meta http-equiv=”Cache-Control” content=”no-siteapp” /link rel=”alternate icon” href=”assets/i/favicon.ico”link rel=”stylesheet” href=”assets/css/amazeui.min.css”link rel=”stylesheet” href=”assets/css/app.css”!– umeditor css –link href=”umeditor/themes/default/css/umeditor.css” rel=”stylesheet”style.title { text-align: center;}.chat-content-container { height: 29rem; overflow-y: scroll; border: 1px solid silver;}/style/headbody !– title start — div class=”title”  div class=”am-g am-g-fixed”   div class=”am-u-sm-12″    h1 class=”am-text-primary”ShiYanLou Chat/h1   /div  /div /div !– title end — !– chat content start — div class=”chat-content”  div class=”am-g am-g-fixed chat-content-container”   div class=”am-u-sm-12″    ul id=”message-list” class=”am-comments-list am-comments-list-flip”/ul   /div  /div /div !– chat content start — !– message input start — div class=”message-input am-margin-top”  div class=”am-g am-g-fixed”   div class=”am-u-sm-12″    form class=”am-form”     div class=”am-form-group”      script type=”text/plain” id=”myEditor” style=”width: 100%;height: 8rem;”/script     /div    /form   /div  /div  div class=”am-g am-g-fixed am-margin-top”   div class=”am-u-sm-6″    div id=”message-input-nickname” class=”am-input-group am-input-group-primary”     span class=”am-input-group-label”i class=”am-icon-user”/i/span     input id=”nickname” type=”text” class=”am-form-field” placeholder=”Please enter nickname”/    /div   /div   div class=”am-u-sm-6″    button id=”send” type=”button” class=”am-btn am-btn-primary”     i class=”am-icon-send”/i Send    /button   /div  /div /div !– message input end — !–[if (gte IE 9)|!(IE)]!– script src=”assets/js/jquery.min.js”/script !–![endif]– !–[if lte IE 8 ] script src=””/script ![endif]– !– umeditor js — script charset=”utf-8″ src=”umeditor/umeditor.config.js”/script script charset=”utf-8″ src=”umeditor/umeditor.min.js”/script script src=”umeditor/lang/zh-cn/zh-cn.js”/script script  $(function() {   // 初始化消息輸入框   var um = UM.getEditor(‘myEditor’);   // 使昵稱框獲取焦點   $(‘#nickname’)[0].focus();  }); /script/body/html  

編寫完成之後啟動Tomcat伺服器，然後訪問   ，會看到如下界面。

3. 編寫後台代碼

新建一個com.shiyanlou.chat的包，在包中創建一個名為ChatServer的類，從JavaEE 7開始就統一了WebSocket的API，因此無論是什麼伺服器，用Java寫的代碼都是一樣的，代碼如下：

?

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950    package com.shiyanlou.chat;import java.text.SimpleDateFormat;import java.util.Date;import javax.websocket.OnClose;import javax.websocket.OnError;import javax.websocket.OnMessage;import javax.websocket.OnOpen;import javax.websocket.Session;import javax.websocket.server.ServerEndpoint;import net.sf.json.JSONObject;/** * 聊天伺服器類 * @author shiyanlou * */@ServerEndpoint(“/websocket”)public class ChatServer { private static final SimpleDateFormat DATE_FORMAT = new SimpleDateFormat(“yyyy-MM-dd HH:mm”);  // 日期格式化 @OnOpen public void open(Session session) {  // 添加初始化操作 } /**  * 接受客戶端的消息，並把消息發送給所有連接的會話  * @param message 客戶端發來的消息  * @param session 客戶端的會話  */ @OnMessage public void getMessage(String message, Session session) {  // 把客戶端的消息解析為JSON對象  JSONObject jsonObject = JSONObject.fromObject(message);  // 在消息中添加發送日期  jsonObject.put(“date”, DATE_FORMAT.format(new Date()));  // 把消息發送給所有連接的會話  for (Session openSession : session.getOpenSessions()) {   // 添加本條消息是否為當前會話本身發的標誌   jsonObject.put(“isSelf”, openSession.equals(session));   // 發送JSON格式的消息   openSession.getAsyncRemote().sendText(jsonObject.toString());  } } @OnClose public void close() {  // 添加關閉會話時的操作 } @OnError public void error(Throwable t) {  // 添加處理錯誤的操作 }}  

4. 前後台交互

後台寫完了，前台要用WebSocket連接後台，需要新建一個WebSocket對象，然後就可以和伺服器端進行交互，從瀏覽器發送消息給伺服器端，同時要驗證輸入框的內容是否為空，然後接受服務端發送的消息，把它們動態地添加到聊天內容框中，在

?

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354    var um = UM.getEditor(‘myEditor’);$(‘#nickname’)[0].focus();// 新建WebSocket對象，最後的/websocket對應伺服器端的@ServerEndpoint(“/websocket”)var socket = new WebSocket(‘ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}/websocket’);   // 處理伺服器端發送的數據   socket.onmessage = function(event) {    addMessage(event.data);   };   // 點擊Send按鈕時的操作   $(‘#send’).on(‘click’, function() {    var nickname = $(‘#nickname’).val();    if (!um.hasContents()) {    // 判斷消息輸入框是否為空     // 消息輸入框獲取焦點     um.focus();     // 添加抖動效果     $(‘.edui-container’).addClass(‘am-animation-shake’);     setTimeout(“$(‘.edui-container’).removeClass(‘am-animation-shake’)”, 1000);    } else if (nickname == ”) {    // 判斷昵稱框是否為空     //昵稱框獲取焦點     $(‘#nickname’)[0].focus();     // 添加抖動效果     $(‘#message-input-nickname’).addClass(‘am-animation-shake’);     setTimeout(“$(‘#message-input-nickname’).removeClass(‘am-animation-shake’)”, 1000);    } else {     // 發送消息     socket.send(JSON.stringify({      content : um.getContent(),      nickname : nickname     }));     // 清空消息輸入框     um.setContent(”);     // 消息輸入框獲取焦點     um.focus();    }   });   // 把消息添加到聊天內容中   function addMessage(message) {    message = JSON.parse(message);    var messageItem = ‘li class=”am-comment ‘      + (message.isSelf ? ‘am-comment-flip’ : ‘am-comment’)      + ‘”‘      + ‘a href=”javascript:void(0)” img src=”assets/images/’      + (message.isSelf ? ‘self.png’ : ‘others.jpg’)      + ‘” alt=”” width=”48″ height=”48″//a’      + ‘divheaderdiv’      + ‘a href=”javascript:void(0)”‘      + message.nickname + ‘/a time’ + message.date      + ‘/time/div/header’      + ‘div’ + message.content      + ‘/div/div/li’;    $(messageItem).appendTo(‘#message-list’);    // 把滾動條滾動到底部    $(“.chat-content-container”).scrollTop($(“.chat-content-container”)[0].scrollHeight);   }  

到這步，簡單的網頁聊天室就完成了，你可以多開幾個窗口或在區域網中邀請小夥伴們來一起測試。

六、小結

本次項目課使用WebSocket實現了簡單的網頁聊天室，其實WebSocket不僅可以應用於瀏覽器，也可以應用於桌面客戶端。