前端websocket连接报错403_自己动手实现基于websocket的聊天web聊天功能高仿仿qq

基于websocket的聊天功能实现

1.前端咱们使用layui的前端框架layim组件，需要的同学直接进官网获取代码授权，不建议破解代码。

2.后端咱们写个简单的 websocket服务，由于时间有限我会抽空分步写出实现步骤，需要的同学关注，当然如果本身是大神可以绕道。

先给大家看一下效果图

登录

好友聊天

换肤功能

消息提示

好友消息提示

最近联系人和群

图片发送浏览

qq基本功能都有，不一一介绍了

再次向layui的作者闲心表示致敬

看完了效果咱们做做前端的准备工作

websocket前端相对比较简单，以前服务端作者用Tomcat7和Tomcat9的jar包，这两个版本会有些写法上的区别作者此处用Tomcat9作为服务端。

首先我们写一个调用连接服务的方法

function connection(){

//此处用于页面提示

tips.html("开始连接服务……");

//判断浏览器是否支持

if('WebSocket' in window){

//sy()获取服务器地址方法，imchat为websocket入口地址，id为接入参数，可以不要参数

websocket = new WebSocket("ws://"+sy()+"/imchat/"+id);

}else{

tips.html("不支持websocket");

}

//连接发生错误的回调方法

websocket.onerror = function(ev,data){

tips.html("连接发生错误的回调方法");

};

//连接成功建立的回调方法

websocket.onopen = function(e){

// alert('连接成功建立的回调方法');

tips.html("");

};

//接收到消息的回调方法

websocket.onmessage = function(event){

//接收到消息处理为json对象

var json=JSON.parse(event.data);

console.log("接收信息：");

console.log(event.data);

//判断消息类型

if(json.key=="offline"){

//设置用户离线 并提示

layim.setFriendStatus(json.id, 'offline');

layim.setChatStatus('离线');

layer.msg(json.content+"无法接收到消息