websocket实现即时聊天

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

                                      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

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
是的,使用 WebSocket 可以实现即时通讯。WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,在客户端和服务器之间实现实时数据传输。 以下是一个简单的示例,演示如何使用 JavaScript 和 Node.js 在客户端和服务器之间建立 WebSocket 连接: 1.在服务器端,使用 Node.js 和 WebSocket 模块创建 WebSocket 服务器: ```javascript const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function connection(ws) { console.log('Client connected'); ws.on('message', function incoming(message) { console.log('Received message: %s', message); ws.send('Server received message: ' + message); }); ws.on('close', function close() { console.log('Client disconnected'); }); }); ``` 2.在客户端,使用 JavaScript 和 WebSocket API 连接到 WebSocket 服务器: ```javascript const ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('open', function open() { console.log('Connected to WebSocket server'); ws.send('Hello, server!'); }); ws.addEventListener('message', function incoming(event) { console.log('Received message: %s', event.data); }); ws.addEventListener('close', function close() { console.log('Disconnected from WebSocket server'); }); ``` 这个示例中,当客户端连接到 WebSocket 服务器时,它会发送一条消息并等待服务器的响应。服务器会在收到消息后发送一条响应消息。客户端会在收到响应消息后将其输出到控制台。当客户端关闭连接时,服务器会收到一个 close 事件。 通过 WebSocket,您可以实现实时通信,例如在线聊天、实时游戏等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值