websocket的B/S簡單應用
阿新 • • 發佈：2019-01-25
一、websocket和http的區別(B/S結構)
1.http：每次請求都要經歷‘建立連線、斷開連線’。開銷大。
2.websocket，只需建立一次連線，可以進行多次資料傳輸。開銷小，即使性。
二、websocket的倆種結構
1.C/S結構
Cliet/Server,需要使用者安裝客戶端，例如：QQ,QT,MSN等等。
2.B/S結構
Brower/Server，使用者通過瀏覽器和伺服器之間通訊。
三、通過案例瞭解BS模型
1.效果圖
（1）多個使用者登陸
（2）登陸的使用者群聊 早進入群聊的可以看到後如群聊的使用者進群聊資訊
2.程式碼實現
（1）頁面程式碼
1）index.jsp。使用者登陸頁面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
<h4 2）chat.jsp。使用者聊天介面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body style="align='center'">
<div style="position:absolute;left:20%;transform:translateX(-50%);top:50%;transform:translateY(-50%)">
<h4>聊天頁面</h4>
<div
style="border: solid 1px black; margin: 20px; padding: 20px; width: 500px; height: 450px;overflow:auto;">
<div>
<!-- 顯示聊天列表 -->
<ul id="message"></ul>
</div>
</div>
<div>
<label>輸入傳送的訊息</label> <input type="text" id="msg" />
<button onclick="javascript:buttonOnclick();">傳送</button>
</div>
</div>
</body>
<!-- 儲存登陸使用者的暱稱 -->
<%
String nick = (String) request.getAttribute("nick");
%>
<script type="text/javascript">
var ws = null;
if(WebSocket){
//執行下面語句，就建立通道
ws = new WebSocket("ws://localhost:8080/demo/chat");
}else{
alert("瀏覽器不支援");
}
//客戶端向伺服器傳送訊息
ws.onopen = function(){
ws.send("<span style=\"background-color:yellow;\">使用者【<%=nick%>】加入聊天室</span>");
}
//服務端將客戶端的資料返回（頁面接收服務端的訊息）
ws.onmessage = function(event) {
console.log(event.data);
showMessage(event.data);
}
function showMessage(msg) {
var html = $('#message').html();
html = html + "<li>" + msg + "</li>";
$('#message').html(html);
console.info("xxx=" + html);
//////////////////////////////
//客戶端，伺服器1對n關係（群聊）
///////*新增以下程式碼*//////////
message.html(html);//追加頁面
message.scrollTop(message[0].scrollHeight);//顯示最新訊息
}
//客戶端手動錄入訊息併發送(點選按鈕傳送)【客戶端，伺服器1對1關係】
function buttonOnclick(){
var message = $('#msg').val();
console.info("msg=" + message);
ws.send("<p style=\"color:blue;\">[<%=nick%>]說</p>" + message);
//清空原來的值
$(this).textbox('clear');
}
</script>
</html>（2）java類。
1）ChatServer.java。聊天室的客戶服務端程式碼。
package com.lj.server;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
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;
/*申明websocket的名字*/
@ServerEndpoint("/chat")
public class ChatServer {
// 存放通訊資源的，在message中使用
private Session session;
// 用來存放每個客戶端對應伺服器的webSocket物件，程序安全
private static CopyOnWriteArraySet<ChatServer> servers = new CopyOnWriteArraySet<ChatServer>();
/* 通道建立成功需要執行的動作 */
@OnOpen
public void onOpen(Session session) {
this.session = session;
servers.add(this);
System.out.println("建立連線，sessionId:" + session.getId());
}
/* 接受對方的資料 */
@OnMessage
public void onMessage(String message) {
System.out.println("開始接收資料，message:" + message);
// 伺服器反饋客戶端
try {
// 伺服器客戶端1對1
// this.session.getBasicRemote().sendText(message);
// 伺服器客戶端1：n（群發）
for (ChatServer server : servers) {
server.session.getBasicRemote().sendText(message);
System.out.println("伺服器反饋資料，message：" + message);
}
//System.out.println("伺服器反饋資料，message：" + message);
} catch (IOException e) {
e.printStackTrace();
}
}
/* 關閉連線 */
@OnClose
public void onClose() {
System.out.println("通道連線關閉");
}
@OnError
public void onError(Session session, Throwable error) {
servers.remove(this);
System.out.println("發生錯誤" + error.getStackTrace());
}
}
2）UserServlet.java.
package com.lj.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UserServlet extends HttpServlet{
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//獲取index的nick，並傳到chat.jsp
req.setCharacterEncoding("utf-8");
String nick = req.getParameter("nick");
req.setAttribute("nick",nick);
req.getRequestDispatcher("chat.jsp").forward(req, resp);
System.out.println("post");;
}
}
配置**UserServlet** 對應的servlet(web.xml)
<servlet>
<servlet-name>UserServlet</servlet-name>
<servlet-class>com.lj.servlet.UserServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UserServlet</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>（3）專案結構
(4)完畢。沒有用CSS,所以介面，很，彆扭。
【完整程式碼】