websocket的B/S简单应用

最新推荐文章于 2024-08-07 17:33:22 发布

忘记昵称了

最新推荐文章于 2024-08-07 17:33:22 发布

阅读量1.3k

点赞数

分类专栏：聊天入门

本文链接：https://blog.csdn.net/qq_37971615/article/details/81414802

版权

聊天入门专栏收录该内容

4 篇文章 0 订阅

订阅专栏

看视频后留的笔记。
视频网址：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,所以界面，很，别扭。

【完整代码】

忘记昵称了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
websocket的B/S简单应用

看视频后留的笔记。视频网址：https://ke.qq.com/course/284915一、websocket和http的区别(B/S结构) 1.http：每次请求都要经历‘建立连接、断开连接’。开销大。 2.websocket，只需建立一次连接，可以进行多次数据传输。开销小，即使性。二、websocket的俩种结构 1.C/S结构 Cliet/Server,需...
复制链接

扫一扫

专栏目录