websocket的B/S简单应用
程序员文章站
2022-05-21 13:50:17
...
看视频后留的笔记。
视频网址：https://ke.qq.com/course/284915
一、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>登陆页面</h4>
<form action="login" id="login" method="post" >
<div></div>
<div style="text-align: center;margin-bottom: 10px;">
<label>填写登陆名：</label><input name="nick" id="nick" >
</div>
<div style="text-align:center;float: center;margin-left: 35%;">
<a href="chat.jsp"><button >登陆</button></a>
<!-- <div style="text-align: center;background-color: green;width: 250px;height: 25px;">
<a href="javascript:goChat()" style="text-align: center;font-family: fantasy;font-weight: bolder;color: white;">进入聊天室</a>
</div> -->
</div>
</form>
</body>
<script>
/* 校验输入框是否有值 */
function goChat(){
if($('#login').form('enableValidation').form('validate')){
$('#login').submit;
}
}
</script>
</html>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,所以界面，很，别扭。
【完整代码】
上一篇： 【CSS】过渡、动画和变换
下一篇： 花旗下调九城股票评级 股价应声大跌32%