我寫的demo是使用的uniapp
服務端使用的是 socket.io客戶端使用的是socket.io-client
使用之前需要先把相應的環境需要的依賴配置好。這里不贅述了。
下載
```javascript
npm install vue-socket.io --save
```
下載之后的引入
在app.vue 中導入
```javascript
import io from 'socket.io-client'
```
建立一個socket模板，在使用的時候導入。
根目錄下建立socketio.js
```javascript
import io from 'socket.io-client'
let socket = io.connect(連接地址);
module.exports = socket;
```
在頁面中的使用
```javascript
//先引入，然后在moutend中監聽服務端事件
import socket from '../../socketio.js'
mounted() {
//聊天室有新人加入，服務端向客戶端推送的消息
socket.on('addUser', function(data) {
console.log(data);
})
//聊天室有人離開，服務端向客戶端推送的消息
socket.on('leaveRoom', function(data) {
console.log(data)
})
},
```
向服務端發送消息
```javascript
//為發送按鈕或者enter 綁定事件
send() {
socket.on('connection',function(){
//向某個人私發
socket.emit('sendUser', {
from: froms,//從哪來
to: to, //到哪去
content: ""//發送的內容
})
//向除自己之外的人發送
socket.emit('sendMsgRoom', {
from: froms,
room: 'room', //命名空間 簡單理解為房間名
content: user
})
})
```
服務端的處理
新建一個express項目
```javascript
express --view=ejs 項目名稱
```
在router中配置自己服務端的路由
```javascript
//user.js
var express = require('express');
var router = express.Router();
var db = require("../db"); //引入數據庫封裝模塊
/* GET users listing. */
router.get('/', function(req, res, next) {
db.query("SELECT * FROM USER",[],function(results,fields){
res.json({status: 200, data : results});
})
});
module.exports = router;
```
然后在app.js中引入
```javascript
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var getUserListRouter = require('./routes/getuserlist');
//解決跨域
const cors = require('cors')
var app = express();
app.use(cors())
//設置跨域訪問 這部分 不知道為啥不起作用，可能是因為沒有重新運行。其他的不太清除，大佬看到了回復一下
// app.all('*', (req, res, next) => {
// res.header("Access-Control-Allow-Origin", "*");
// res.header("Access-Control-Allow-Headers", "X-Requested-With");
// res.header("Access-Control-Allow-Methods", "PUT,POST,GET");
// res.header("X-Powered-By", ' 3.2.1');
// res.header("Content-Type", "application/json;charset=utf-8");
// next();
// });
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/getUserList', getUserListRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
var sqlQuery = require("./db"); //引入數據庫封裝模塊
module.exports = app;
```
然后在bin目錄下的 socketio.js文件中進行邏輯處理
```javascript
let socketio = {}
function getSocket(server) {
socketio.io = require('socket.io')(server);
let io = socketio.io;
var db = require("../db"); //引入數據庫封裝模塊
io.on('connection', function(socket) {
//此處的socket是當前某個瀏覽器與服務器的連接對象
//當新的用戶連接進來時，向所有人廣播ID sockets 向所有人
//發送數據
socket.emit('news', {
hello: 'world'
});
socket.emit('connect', {
msg: '連接成功'
});
//接受數據
socket.on('my other event', function(data) {
console.log(socket.id)
console.log(data);
socket.emit('hello',{content:"第一條"})
})
//類似於登錄
socket.on('chooseUser', function(data) {
console.log(data)
socket.join('room')
let id = data.index.id;
let name = data.index.username;
db.query("update user set isonline = 1, socketid= '"+socket.id+"' where id="+ id,[],function(results,fields){
let result = {status: 200, msg :"登錄成功，socketId已保存，登錄狀態變更",socketid: socket.id}
socket.emit('login',result);
io.sockets.emit('addUser',{
id:id,
socketid : socket.id,
content:id+"號玩家"+name+"進來了"
})
})
})
//退出
socket.on('logout', function(data) {
socket.leave('room')
let id = data.id.id;
let name = data.id.username;
db.query("update user set isonline = 2, socketid= '' where id="+ id,[],function(results,fields){
let result = {status: 200, msg :"退出成功，socketId已清除，登錄狀態變更" }
socket.emit('logout',result);
io.sockets.emit('leaveRoom',{
id:id,
content:id+"號玩家"+name+"離開了"
})
})
})
//向某個用戶發送消息
socket.on('sendUser',function(data){
// data = {
// from:"發送者ID",
// to:"收到者ID",
// content:"內容"
// }
socket.to(data.to).emit('sendClient',data)
})
// join/leave加入和離開房間
socket.on('addRoom',function(data){
let room = socket.join(data.room)
})
//監聽群聊事件且廣播給所有人
socket.on('sendMsgRoom',function(data){
console.log(data)
if(data.to != ""){
socket.to(data.to).emit('danliao',data)
}else{
socket.to(data.room).emit('qunliao',data.content)
}
})
});
// let qq = io.of('/qq');
// qq.on('connection',function(socket){
// socket.emit('news',{content:"qq命名空間發送的內容"});
// })
// let wx = io.of('/wx');
// wx.on('connection',function(socket){
// socket.emit('news',{content:"wx命名空間發送的內容"});
// })
}
// getSocket();
socketio.getSocket = getSocket;
module.exports = socketio
```
就能實現簡單的聊天了
最后再補一句，只在H5實現，其他地方沒有測試。
這些東西 如果讀者發現什么問題 ，望不吝賜教。拜謝