前言

最近想做一個聊天，但是網(wǎng)上的很多都是不能實現(xiàn)的，要么就是缺少代碼片段很難實現(xiàn)websocket的鏈接，更別說聊天了。自己研究了一番之后實現(xiàn)了這個功能。值得注意的是，我想在小程序中使用socket.io，不好使，可能是個人技術(shù)不到位的問題吧，沒有實現(xiàn)。但是使用websocket可以完成這個功能。

環(huán)境準(zhǔn)備

node @14.16.1

express @4.19.2

vsocde

HbuilderX

微信開發(fā)者工具

后端的依賴

后端代碼

app.js文件的代碼

// express具體使用看我提供個文章中有
const express = require('express')
const app = express()
const websocket = require('websocket').server
const http = require('http')const httpServer = http.createServer().listen(3000,()=>{console.log('http server is running at port 3000');
})
const websocketServer = new websocket({httpServer: httpServer,autoAcceptConnections: false
})const conArr = []websocketServer.on('request', function(request) {// 這就是一次客戶端發(fā)送的消息// websocket 需要將這個鏈接保存起來// 只要客戶端和服務(wù)器沒有斷開，這個鏈接必須在// 客戶端與服務(wù)端的通信都是從這個鏈接上通信const connection = request.accept()// 每次接收一個鏈接，將它存放在數(shù)組里面conArr.push(connection)// 監(jiān)聽客戶端發(fā)送的消息connection.on('message', function(message) {console.log(message);// 發(fā)送消息給客戶端（廣播到各個客戶端）// 后面加上 utf8Data 編碼// 要將所有的鏈接全部發(fā)出去，才可以讓每個客戶端接收到其他傳來的數(shù)據(jù)for(let i = 0; i < conArr.length; i++) {conArr[i].send(message.utf8Data)}})
})app.get('/', (req, res) => {res.send('Hello World!')
})app.listen(8080, () => {console.log('Express server is running at port 3000');
})

簡單分析一下，websocket是基于http協(xié)議的所以要導(dǎo)入http模塊，express和websocket監(jiān)聽的端口不一樣，這樣的話前端可以調(diào)用存儲聊天信息的接口往數(shù)據(jù)庫表中插入聊天信息，這樣就可以完成聊天記錄的存儲，現(xiàn)在這個demo就是做了一個簡單的websocket的鏈接和簡陋的聊天界面。后續(xù)會完善一個開源項目完成聊天的功能、撤回和聊天記錄回顯的功能。

前端代碼（uniapp）

<template><view>姓名:<input type="text" v-model="name" />話語:<input type="text" v-model="text" /><button @click="onSumbit">發(fā)送</button></view>
</template>
<script>export default{data(){return{name:'',text:''}},onLoad() {this.getLink()},methods:{// 在頁面或組件的方法中調(diào)用,初始化鏈接websocketgetLink(){uni.connectSocket({url: 'ws://127.0.0.1:3000',success() {console.log('WebSocket連接成功');},fail(err) {console.error('WebSocket連接失敗', err);}});},// 收到信息getJieShouMessage(){uni.onSocketMessage(function (res) {console.log('收到消息：', res.data);});},// websocket發(fā)生了錯誤getErrorMessage(){uni.onSocketError(function (err) {console.error('WebSocket錯誤：', err);});},// websocket關(guān)閉getSocketGuanBi(){uni.onSocketClose(function () {console.log('WebSocket連接已關(guān)閉');});},// 如果不需要的話就關(guān)閉websocketgetCloseThisLiaotian(){uni.closeSocket({code: 1000,  // 關(guān)閉連接的狀態(tài)碼，可選reason: '用戶關(guān)閉連接',  // 關(guān)閉連接的原因，可選success() {console.log('WebSocket連接已關(guān)閉');},fail(err) {console.error('WebSocket關(guān)閉失敗', err);}});},// 這個是點擊發(fā)送信息onSumbit(){var that = thislet values={name:this.name,context:this.text}uni.sendSocketMessage({data: JSON.stringify(values),success() {console.log('消息發(fā)送成功');that.getJieShouMessage()},fail(err) {console.error('消息發(fā)送失敗', err);}});}}}
</script>

注意

getLink(){uni.connectSocket({url: 'ws://127.0.0.1:3000',success() {console.log('WebSocket連接成功');},fail(err) {console.error('WebSocket連接失敗', err);}});},

這段代碼中，需要初始化調(diào)用，進行鏈接websocket，url是ws協(xié)議，線上的地址需要wss協(xié)議，具體可以參考微信官方的wss協(xié)議要求，我這demo是微信小程序。

效果圖

通過上圖可以看見可以及時的收到信息，前端拿到信息進行渲染就可以完成websocket的及時通訊了。