websocket实现即时聊天_websocket实现聊天传输文件-优快云博客

本文链接：https://blog.youkuaiyun.com/sundaysunshine/article/details/53427336

本文介绍了一个使用WebSocket实现即时聊天的应用，包括窗口标题闪烁提醒、消息接收、用户列表更新等功能。当收到消息时，如果窗口失去焦点，标题会闪烁提示。WebSocket连接在异常时会关闭，确保服务器安全。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

websocket的实现聊天及异常解决方案

看了很多人写的关于websocket的简单实现即时聊天（点对点+广播方式），鼓起勇气就想自己也写一个，虽然只是实现了简单的文字传送。当然特别感谢DyncRole大神的博客给了我许多的启发。嗯嗯，不太会说话，直接谈细节。

首先websocket协议几个关键部分就是分别对应到：

思路：

建立连接后，进行信息传输，一般只传简单的文字和必要的文件信息，所有样式都是在客户端拼接的。

1）服务器与客户端建立连接

 

  var ip_addr = document.location.hostname;//获取服务器地址
   console.info(ip_addr);	
    if ('WebSocket' in window){
      //拼接websocket对象
      ws = new WebSocket("ws://"+ip_addr+":8080/ostp/websocket");
    }else if ('MozWebSocket' in window){
	ws = new WebSocket(encodeURI("ws://"+ip_addr+":8080/ostp/websocket"));
    }
    else{
	   alert("not support");

    }

2)服务器与客户端建立连接成功后干什么

/**
 * AUTOOR:ggr
 * DESCRIPTION:即时通信关键js
 * TIME：2016-12-01
 */
	var ws = null;//定义websocket连接
	toName="all";//信息接收方，默认广播方式
	
	/**
	 * 实现窗口标题在收到消息时闪烁
	*/ 
	var flashStep=0;  //交替变量
	
	var flashTitleRun = false; //是否正在执行
	
	var normalTitle = "聊天室"; 
	
	//当前浏览器窗口是否处于焦点
	var isWindowFocus = true;

	function focusin() { isWindowFocus=true;}

	function focusout() { isWindowFocus=false;}

	//注册焦点变化监听器

	if ("onfocusin" in document){//for IE 

	    document.onfocusin = focusin;

	    document.onfocusout = focusout;

	} else {

	    window.onblur = f