webSocket实现多人在线聊天

主要思路如下：

1.使用vue构建简单的聊天室界面

2.基于nodeJs 的webSocket开启一个socket后台服务，前端使用H5的webSocket来创建一个socket对象来链接后端的socket服务

3.后端开启一个socket服务后,可以监听到客户端的链接，以及客户端发送过来的消息；也可以主动给客户端发送消息，例如：当有新的客户端连接的时候，服务端主动给所有连接的客户发消息，让所有人都知道有新的用户加入聊天室

4.前端new一个webSocket实例，去连接socket服务，然后客户端和服务端就可以实现双向通讯了，连接到后端服务之后，我们就可以向服务端发送消息了，并且也可以监听到服务端发送过来的消息。

5.双向通讯建立起来之后，可以根据功能需求来进行相应的代码逻辑

一、使用vue构建一个简单的项目，并开发一个简单的聊天页面

聊天页面代码,前端的主要逻辑都在这里 chating/index.vue

二、使用nodeJs搭建一个webSocket服务

webSocket.js文件

/* 首先在根目录下安装nodeJs的ws模块：npm install ws */

/* 引入nodejs的webSocket模块 */
var WebSocket = require('ws').Server
var moment = require('moment')

/* 创建一个webSocket实例 */
var wss = new WebSocket({
url: 'localhost', // webSocket服务的ip
port: 8888 // webSocket服务的端口
})

/* socketId */
var id = 0
var onlineMemberList = []
var defaultUser = 'user'

/* 监听客户端连接 */
wss.on('connection', function (ws, req) {
id++
ws.id = id // 给每个连接的客户端绑定一个id
let reqUser = req.url.split('?')[1]
let name = reqUser && reqUser.split('=')[1]
let userName
if (name) {
/* 因为传过来的名字可能是中文的，这里需要解码，否则前端接收到的是一堆编码后的字符串 */
userName = decodeURIComponent(name)
} else {
userName = defaultUser + id
}
var userInfo = {
userName: userName,
socketId: id,
date: moment().format('MMMM Do YYYY, h:mm:ss a')
}
/* 当用户名一样的时候，表示重新登录 */
for (var i = 0; i < onlineMemberList.length; i++) { if (userInfo.userName === onlineMemberList[i].userName) { onlineMemberList[i] = userInfo wss.clients.forEach(itemWs => {
itemWs.send(JSON.stringify(onlineMemberList))
})
return
}
}

onlineMemberList.push(userInfo)
wss.clients.forEach(itemWs => {
itemWs.send(JSON.stringify(onlineMemberList))
})

/* 监听客户端发过来的信息 */
ws.on('message', function (data) {
console.log(data)
let newData = JSON.parse(data)
newData.serveDate = moment().format('MMMM Do YYYY, h:mm:ss a')
/* 给所有连接的客户端发送数据 */
wss.clients.forEach(itemWs => {
itemWs.send(JSON.stringify(newData))
})

/\* 给最后一个连接的客户端发送数据 \*/  
// ws.send(JSON.stringify(newData))  

})

/* 监听客户端关闭 */
ws.on('close', function (ev) {
console.log('客户端断开连接')
/* 监听到用户断开连接后，将在线的重新广播给所有有人 */
onlineMemberList = onlineMemberList.filter(item => {
return item.socketId !== ws.id
})

wss.clients.forEach(itemWs => {  
  itemWs.send(JSON.stringify(onlineMemberList))  
})  
console.log(onlineMemberList, 'onlineMemberList')  
console.log(ws.id, 'ws.id')  

})

/* 监听客户端发生异常 */
ws.on('error', function (ve) {
console.log('客户端异常')
})
})

console.log('webSocket服务已开启，端口为：8888')

为了方便管理代码，我把webSocket服务的代码放到了vue项目根目录下的socketServe文件夹下面，在启动vue项目之前先要来到这个文件夹里面开启socket服务，才能在聊天界面连接到服务器

github地址：https://github.com/yanhuomili/chatingGroup